iview表单验证

iview表单验证的步骤

• 第一步：给 Form 设置属性 rules

:rules="规则设置"

• 第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“
• 第三步：注意：Form标签里面是 :model
• 第四步：注意：在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效
• 第五步：在操作保存按钮时，添加方法，对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败。

位置

一般位置是在 Data()里面

data() return  { editInfoValidate:{
                    contractNo:[
                               { required: true, message: '合同编号不能为空', trigger: 'blur' },
                            ]
} }

也可以放在 和new Vue 一个层级,这样变成全局验证

还可以放在FormItem 里(不推荐)

<FormItem
     prop="UserId"
          :rules=" [
              { required: true, message: '请选择一项', trigger: 'change',type:'number',min:1},
          ]"
    >
       <Select v-model="formAddOrder.UserId" filterable @on-change="selectUser">
                <Option v-for="(item,index) in userList" :value="item.UserId" :label="item.name" :key="index" >
                      <span>{{item.name}}</span>
                  </Option>
       </Select>
 </FormItem>

例子

//methods里面，写的方式
editInfoValidate: {

        CityId: [  { required: true, message: '  ?     ', type: 'number' },
        { type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'},],

       Title: [  { required: true, message: ''},
                {type: 'string', max: 5, message: '',trigger: 'blur'} ,

       ]
},

////methods里面，写的方式
addChange(name){
     this.$refs[name].validate(valid => {
          if (valid) {
          }
      });

1.2 FormItem 添加验证 prop="name"

支持的类型

type:'string'
string: 必须是字符串类型。这是默认类型
number: 必须是数字
boolean: 必须是布尔型的
method:必须是类型函数
regexp: 必须是ReGEXP的实例，或者是在创建新的ReGEXP时不会生成异常的字符串
integer:必须是整数.
float:必须是浮点数.
array: 必须是由Array.isArray确定的数组
object: 必须是类型对象而不是Array.isArray
enum: 枚举中必须存在值。
date: 按日期确定的值必须有效
url: 必须是URL类型。
hex: 必须是十六进制。
email:必须是电子邮件类型。

pattern: schema.pattern.email

{ type: 'number', message: '', trigger: 'blur', transform(value) {
        return Number(value);
}

---

内置的验证规则

required: true 

pattern :正则表达式

min: 6 //最小值6

max:10// 最大值10

Length : 长度

enum: 验证字段是否存在其中

enum: 验证字段是否存在其中

{ message:'不包含a , u, g',trigger: 'change',type: 'enum',enum: ['a', 'u', 'g']}

whitespace : true | false
true:空白字符 ->错误提醒
false: 空白字符->不报错

设置提示

message:'提示信息'

设置事件

trigger : 'change' | 'blur'
trigger: 'blur'

iview进行多重验证的写法：

ruleValidate: {
             goodsNum: [
                     { required: true, message: '数量不能为空', trigger: 'blur' },
                     { type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'},
                        ],
      }

2.2 自定义验证

方式1

// 定义

data() {
    const validatePass = (rule, value, callback) => {
      var passex = /^(?=.*\d)(?=.*[a-zA-Z])(?!.*\s).{8,22}$/;
      if (value === "" || !passex.test(value)) {
        callback(new Error("密码不能为空且为8-22位的字母和数字组合"));
      } else {
        if (this.changePassForm.TwoPassWord !== "") {
          // 对第二个密码框单独验证
          this.$refs.changePass.validateField("TwoPassWord");
        }
        callback();
      }
    };

    return {}

使用

validaterules: {
        OldPassWord: [
          {
            type: "string",
            required: true,
            message: "请输入原始密码",
            trigger: "blur"
          }
        ],
        NewPassword: [
          {
            required: true,
            validator: validatePass,//注意这里
            trigger: "blur"
          }
        ]

}

 {validator(rule, value, callback, source, options) {
  var errors = [];
  if (!/^[a-z0-9]+$/.test(value)) {

          callback('       ?     ?...');
      }
        callback(errors);

 }}

全局的验证,例子

new Vue({
            el: '#addModule',
            data(){
                var  validateuser = function(rule, value, callback){
                    if(!value){
                        return callback(new Error("       ?   "));
                    }else if(!/^[a-zA-Z\d]+$/.test(value)){
                        return callback(new Error("    ?     ?   "))
                    }else{
                        callback();
                    }
                };

return{
		ruleValidate:{
                        username    : [{validator: validateuser,trigger: 'blur'}],
                        nick        : [{validator: validatenick,trigger: 'blur'}],
                        password    : [{validator: validatePass, trigger: 'blur' },{min:6,message:'         ? ?}],
                        rpassword   : [{validator: validatePassCheck, trigger: 'blur' },{min:6,message:'         ? ?}],
                        group:[{required: true, type: 'string', message: '  ?     ', trigger: 'change'}]
}