validation验证

来源：互联网发布：pes贝克汉姆捏脸数据编辑：程序博客网时间：2024/05/28 11:49
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>validation timing customization example</title>    <script src="http://cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>    <script src="http://cdn.bootcss.com/vue-validator/2.1.2/vue-validator.min.js"></script>    <style>      .errors { color: red; }    </style>  </head>  <body>    <div id="app2">      <validator name="validation">        <form novalidate @submit="onSubmit" action="email.html">          <div>Email: <input type="text" v-validate:myemail="{required: true, email:true}"></div>          <div v-if="$validation.myemail.touched" class="errors">              <div v-if="$validation.myemail.required">密码不能为空！</div>              <div v-if="!$validation.myemail.required && $validation.myemail.email">请输入正确的邮箱格式</div>          </div>          <div>Phone: <input type="text" v-validate:myphone="{required: true, phone:true}"></div>          <div v-if="$validation.myphone.touched" class="errors">              <div v-if="$validation.myphone.required">手机号不能为空！</div>              <div v-if="!$validation.myphone.required &&  $validation.myphone.phone">请输入正确的手机号格式</div>          </div>          <div><button type="submit">register</button></div>        </form>      </validator>    </div>    <script>      Vue.validator('email', function (val) {        return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)      });      Vue.validator('phone', function (val) {        return /^(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/.test(val)      })      new Vue({        el: '#app2',        data: {          email:'',          phone:''        },        validators: {          confirm: function (val, target) {            return val === target          }        },        methods: {          onSubmit: function (e) {            this.$validate(true)            if (this.$validation.invalid) {              e.preventDefault()            }          }        }      })    </script>  </body></html>
1 0