validation验证

最新推荐文章于 2024-08-23 07:43:01 发布

a1223f

最新推荐文章于 2024-08-23 07:43:01 发布

阅读量668

点赞数 1

分类专栏：表单验证

本文链接：https://blog.csdn.net/a1223f/article/details/51484255

版权

表单验证专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>