element 之form表单检测

版权声明：本文为QQ帝国原创博客，转载请附上链接，谢谢。 https://blog.csdn.net/QQ_Empire/article/details/89342622

<template>
  <div class="hello">
     
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm">
	  <el-form-item label="联系电话:" prop="buyerPhone" required>
			<el-input v-model="ruleForm.buyerPhone"></el-input>
	  </el-form-item>
      <el-form-item label="Email:" prop="buyerEmail" required>
			<el-input v-model="ruleForm.buyerEmail"></el-input>
	  </el-form-item>
			    
	 <el-form-item>
		 <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
	    <el-button @click="resetForm('ruleForm')">重置</el-button>
	</el-form-item>
				  
   </el-form>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    
  },
  data() {
		  var checkPhone = (rule, value, callback) => {
		    const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/
		    if (!value) {
		      return callback(new Error('电话号码不能为空'))
		    }
		    setTimeout(() => {
		      // Number.isInteger是es6验证数字是否为整数的方法,
                    // 但是我实际用的时候输入的数字总是识别成字符串
		      // 所以我就在前面加了一个+实现隐式转换
		
		      if (!Number.isInteger(+value)) {
		        callback(new Error('请输入数字值'))
		      } else {
		        if (phoneReg.test(value)) {
		          callback()
		        } else {
		          callback(new Error('电话号码格式不正确'))
		        }
		      }
		    }, 100)
		  }
		  var checkEmail = (rule, value, callback) => {
		    const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
		    if (!value) {
		      return callback(new Error('邮箱不能为空'))
		    }
		    setTimeout(() => {
		      if (mailReg.test(value)) {
		        callback()
		      } else {
		        callback(new Error('请输入正确的邮箱格式'))
		      }
		    }, 100)
		  }
      return {
        
             ruleForm: {
			    buyerPhone: '',
			    buyerEmail: ''
			  },
			  rules: {
			    buyerPhone: [
			      { validator: checkPhone, trigger: 'blur' }
			    ],
			    buyerEmail: [
			      { validator: checkEmail, trigger: 'blur' }
			    ]
			  }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>


<style scoped lang="scss">

</style>