element ui 表单正则校验及表单整体校验

element ui 表单校验：

form表单,四个字段值【model,rules,prop,v-model】

绑定到el-form上的属性：
1、:mode 绑定表单数据，
2、:rules 表单验证规则
3、ref拿到当前的DOM对象，整体表单校验时使用
绑定到el-form-item上的属性：
1、prop 指ruleForm里的字段，用来做校验使用的
2、el-form-item里的prop和el-input里的v-model字段保持一致

<el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="100px">
  // 用户名
  <el-form-item label="用户名" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
  </el-form-item>
   // 手机号
  <el-form-item label="手机号" prop="telephone">
    <el-input v-model="ruleForm.telephone"></el-input>
  </el-form-item>
 </el-form>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          username: '',
          telephone: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符',trigger:'blur' }
          ],
          telephone: [
      		{ required: true, message: "请输入手机号", trigger: "blur" },
		    {
			  pattern: /^1[34578]\d{9}$/,    
			  message: "请填写正确的手机号码", trigger: "blur"
		 	}
   		  ],
        }
      }
    },
  }

表单校验规则

1、普通校验方式

rules: {
   username: [
     { required: true, message: '请输入用户名', trigger: 'blur' },
     { min: 3, max: 5, message: '长度在 3 到 5 个字符',trigger:'blur'}
}

2、带正则的校验方式

rules: {
   telephone: [
      { required: true, message: "请输入手机号", trigger: "blur" },
      {
	    pattern: /^1[34578]\d{9}$/,    
	    message: "请填写正确的手机号码", trigger: "blur"
 	  }
   ]
}

3、自定义校验方式

data(){
    // 1、自定义表单校验规则【位置不要写错,写在data下面，return上面】
   var checkTelephone = (rule, value, callback) => {
        const regTelephone = /^1[34578]\d{9}$/
        if (regTelephone .test(value)) {
          return callback()
        } 
        // 返回一个错误提示
        callback(new Error('请输入合法的手机号码'))
   }
      
   return {
	  rules:{
	   	telephone: [
	   		{required: false,message: '请输入手机号码',trigger: 'blur'},
	   		// 2、通过validator注册校验规则
	        {validator: checkTelephone,trigger: 'blur'} 
	    ],
	  }
}

4、*拓展【通过自定义校验方式，判断两次密码是否一致】

data(){
    var validatePass= (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      
      return {
      	ruleForm:{
      		pass:'', // 输入密码
      		checkPass:'' // 确认密码
      	},
      	rules:{
      		checkPass: [
            	{ validator: validatePass, trigger: 'blur' }
            ],
      	}
      }
   }

整体表单校验

提示：当表单校验不通过时，可以通过try catch捕获错误。

方式一：传一个回调函数

login(){
	 this.$refs.formRef.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            alert('error submit!!');
            return false;
          }
}

方式二：不传入回调函数，则会返回一个 promise

async login(){
	try {
		await this.$refs.formRef.validate()
	} catch (e) {
		//如果表单有报错，则进入catch，此时直接return不执行表单提交
		return
	}
}

常用表单校验正则：

手机号：/^1[34578]\d{9}$/
邮箱：/^\w+@\w+(\.\w+)+$/
验证码：/^\d{4}$/
身份证号（18位）：/^[1-9]d{5}(18|19|([23]d))d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/;
//QQ号正则，5至11位
 /^[1-9][0-9]{4,10}$/
//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
/^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/