从头开始研究vue2项目--表单必填项的正则验证三种写法

表单必填项的正则验证三种写法

// 比较繁琐的写法---- ①需要ref一起绑定model数据，rules绑定正则验证
 <el-form ref="form" :model="form" :rules="rules">
  <el-form-item label="密码" prop="sysAccountPwd">
      <el-input
         v-model="form.sysAccountPwd"
         autocomplete="off"
         placeholder="请输入8-20位密码"
      />
   </el-form-item>
</el-form>        
<script>
// ②正则要求
const pwdPattern = /^(?![a-zA-Z]+$)(?![0-9]+$)(?![._~!@#$^&*]+$)(?![0-9a-zA-Z]+$)(?![0-9._~!@#$^&*]+$)(?![a-zA-Z._~!@#$^&*]+$)[A-Za-z0-9._~!@#$^&*]{8,20}$/
export default {
  data() {
  const validatePassword = (rule, value, callback) => {
      if (value === '') {
       callback(new Error('请输入正确密码'))
      } else if (!pwdPattern.test(value)) {
       callback(new Error('密码必须同时包含至少一个字母、一个数字和一个标点符号'))
      } else {
        callback()
      }
   }
    return {
       form: {
        sysAccountPwd:''
      },
      //失去焦点后进行 ③正则验证
        rules: {
        sysAccountPwd: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
     }
   }  
}

简单写法只需要input表单的pattern属性

//第一步一样，省略第二步，只需要在第三步失去焦点验证正则的时候添加上pattern正则要求
 <el-form :model="dataForm" :rules="rules" ref="dataFromRef">
  <el-form-item label="手机号" prop="phone">
      <el-input v-model="dataForm.phone"></el-input>
   </el-form-item>
 </el-from>
 export default {
  data() {
   return{
      dataForm:{
        phone: '',
      },
      rules:{
       phone: [
          { required: true, trigger: 'blur', message: '请输入手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ]
      }
    }
  }
 }

最最简单的方法，直接在第一步进行正则验证（表单不显示*必填项）

 <input v-model="dataForm.phone" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />
  

//当在弹窗表单验证时，触发验证然后关闭弹窗，再打开后往往还是显示校验，可以用以下清除表单的方法
  <el-dialog :title=title :visible.sync="visible" width="30%" top="5vh" append-to-body center :close-on-click-modal="false" :before-close="close">
   //关闭弹窗
  close() {
      this.visible = false;
      this.$refs['form'].clearValidate()
   },