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'}]
}