element uiForm表单之验证手机号/邮箱的合法性

实现效果

1.引入Form表单

• <template>

<el-form
:model="addForm"
:rules="addFormRules"
ref="addFormRef"
label-width="70px">
	<!-- 邮箱 -->
	<el-form-item label="邮箱" prop="email">
	  <el-input v-model="addForm.email"></el-input>
	</el-form-item>
	<!-- 手机号 -->
	<el-form-item label="手机号" prop="mobile">
	  <el-input v-model="addForm.mobile"></el-input>
	</el-form-item>
</el-form>

2.在data中写入检验邮箱/手机号合法性的验证规则

• <script>

data(){
    
    
	//验证邮箱的规则
	var checkEmail = (rule,value,cb) => {
    
    
	  //验证邮箱的正则表达式
	  const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
	  if(regEmail.test(value)){
    
    
	    //合法的邮箱
	    return cb();
	  }
	  //邮箱不合法
	  cb(new Error('请输入合法的邮箱！'));
	}
	//验证手机号的规则
	var checkMobile = (rule,value,cb) =>{
    
    
	  const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
	  if(regMobile.test(value)){
    
    
	    //合法的手机号
	    return cb();
	  }
	  //手机号不合法
	  cb(new Error('请输入合法的手机号！'));
	}
}

3. 添加表单的验证规则

data(){
    
    
	return(){
    
    
		//添加用户的表单数据
        addForm:{
    
    
          email:'',
          mobile:'',
        },
        //添加表单的验证规则
        addFormRules:{
    
    
          email:[
            {
    
    required: true, message: '请输入邮箱', trigger: 'blur'},
            {
    
    validator: checkEmail, trigger: 'blur'}
          ],
          mobile:[
            {
    
    required: true, message: '请输入手机号', trigger: 'blur'},
            {
    
    validator: checkMobile, trigger: 'blur'}
          ],
        },
	}
}