vue 表单验证

 

 <Form ref="ePersonalAccountAddDto" :model="ePersonalAccountAddDto" :label-width="125">
          <FormItem label="名称:" prop="name" :rules="name"  style="margin-top: 20px">
            <Input type="text" v-model="ePersonalAccountAddDto.name" value="" placeholder="名称"></Input>
          </FormItem>
          <FormItem label="手机号码:" prop="mobile" :rules="phone" style="margin-top: 20px">
            <Input type="text" v-model="ePersonalAccountAddDto.mobile" value="" placeholder="手机号码"></Input>
          </FormItem>
          <FormItem label="邮箱地址:" prop="email" :rules="email" style="margin-top: 20px" >
            <Input type="text" v-model="ePersonalAccountAddDto.email" value="" placeholder="邮箱地址"></Input>
          </FormItem>
          <FormItem label="证件号:" prop="idNumber" :rules="idCard" style="margin-top: 20px">
            <Input type="text" v-model="ePersonalAccountAddDto.idNumber" value="" placeholder="证件号"></Input>
          </FormItem>
          <FormItem label="统一社会信用代码:" prop="idNumber" :rules="name" style="margin-top: 20px">
            <Input type="text" v-model="ePersonalAccountAddDto.idNumber" value="" placeholder="统一社会信用代码"></Input>
          </FormItem>
        </Form>

 

data(){
    const validatePhone = (rule, value, callback) => {
          let reg = /^1[3|4|5|7|8][0-9]{9}$/;
          let res = reg.test(value);
          if (!value) {
            return callback(new Error('手机号不能为空'));
          } else {
            if (!res) {
              return callback(new Error('请输入正确的手机号'));
            } else {
              callback();
            }
          }
        };
        const validateIdCard = (rule, value, callback) => {
          let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
          let res = reg.test(value);
          if (!res) {
            return callback(new Error('请输入正确的身份证号码'));
          } else {
            callback();
          }
        };
        const validateEmail = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请正确填写邮箱'));
          } else {
            if (value !== '') {
              var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
              if(!reg.test(value)){
                callback(new Error('请输入有效的邮箱'));
              }
            }
            callback();
          }
        };
    return{
        name:[
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          phone: [
            {validator:validatePhone, required: true, trigger: 'blur'}
          ],
           email: [
             {validator:validateEmail, required: true, trigger: 'blur'}
           ],
          idCard: [
            {validator: validateIdCard,required: true, trigger: 'blur'}
          ],
    }
}