表单验证

vue 校验的触发trigger

• 参数trigger的值有'blur','change',['change','blur'];
  • blur失去焦点时进行验证，常用：对input输入框的验证；
  • change当值发生变化时进行验证；
    • 常用：下拉框select，
    • 日期选择框date-picker，
    • 复选框CheckBox，
    • 单选框radio

双重验证

• 如果里面没有内容提示说手机号，如果有内容变化时提示手机号的正确格式；

phoneNum: [
            {required: true, message: '请输入手机号码', trigger: 'blur'},
            { min: 13, max: 13, message: "长度13个字符", trigger: "change" }
          ]

• 当输入框失去焦点时：

• 当数据改变时：

验证的类型

• 验证非空和长度

rules:{
one: [
{required:true,message:"名称不能为空"，trigger:'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符',trigger: 'blur'}
],

• 验证输入的内容是数字

two: [{ type: 'number', message: '请输入数字类型',trigger: "blur"}],

• 验证输入的内容是日期，因为日期是选择的，所以触发用change

three:[{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],

• 验证输入的内容是多选，多选的内容是一个数组，所以用array,触发用change

four:[{ type: 'array', required: true, message: '请选择日期', trigger: 'change' }],

• 验证输邮箱，邮箱的类型是email,触发用change和blur

five:[{
{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, 
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
}],

使用正则partten

• ^:以什么开头，^1,就是以1开头的意思;
• [ ]: 字符集合。匹配所包含的任意一个字符。注意只能是一个!
• $:以什么结尾，123$ 就是以123结尾的意思;
• ( ) :就是一部分整体,^(123)意思就是必须是123开头;
• \d :数字 0到9都可以。如果是\D那就是除了数字0-9以外的
• { }就是几位的意思。比如\d{8}就是你写8位而且必须是数字;
• /^1[3/4/5/6/7/8/9][0-9]\d{8}$/:以1开头，第2位是3、4、5、6、7、8、9之间的任意一个，第3位0-9中间的任意一个，后面8个都可以；

验证手机号11位

telephone:[
{pattern:/^1[3/4/5/6/7/8/9][0-9]\d{8}$/,
message:"请输入正确的手机号"，
trigger:"blur"}
],

Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-item的prop属性设置为需要校验的字段名即可。

<el-form  :rules="rules" :model="ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input> 
</el-form-item>
</el-form>

常用的自定义校验规则

const validateValidity = (rule, value, callback) =>{
  if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
    callback(new Error('最多只能输入两位小数'));
  }else{
    callback();
  }
};
export function checkMinVal(rule, value,callback) {
  if(value <0) {
    callback(new Error('请输入正整数'));
  } else {
    callback();
  }
}
export function checkMaxVal(rule, value,callback) {
  if(value >= 2147483647) {
    callback(new Error('输入的数字过大'));
  } else {
    callback();
  }
}

//将数据的数据调用controller验证是否存在
export function checkDay(rule, value, callback) {
  selectDay(value).then(response => {
    const code = response.data.code;
    console.log(code);
    if (code == 500) {//数据已存在
      callback(new Error('该数据已存在'));
    } else {
      callback();
    }
  })
}