improve form validate docs

This commit is contained in:
baiyaaaaa 2016-11-18 18:50:29 +08:00 committed by 杨奕
parent dd08623526
commit 4f29fc5534
2 changed files with 34 additions and 42 deletions

View File

@ -2,8 +2,9 @@
export default {
data() {
var checkAge = (rule, value, callback) => {
var age = parseInt(value, 10);
if (!value) {
return callback(new Error('Please input the age'));
}
setTimeout(() => {
if (!Number.isInteger(age)) {
callback(new Error('Please input digits'));
@ -110,16 +111,13 @@
},
rules2: {
pass: [
{ required: true, message: 'Please input the password', trigger: 'blur' },
{ validator: validaePass }
{ validator: validaePass, trigger: 'blur' }
],
checkPass: [
{ required: true, message: 'Please input the password again', trigger: 'blur' },
{ validator: validaePass2 }
{ validator: validaePass2, trigger: 'blur' }
],
age: [
{ required: true, message: 'Please input the age', trigger: 'blur' },
{ validator: checkAge, trigger: 'change' }
{ validator: checkAge, trigger: 'change', trigger: 'blur' }
]
},
dynamicForm: {
@ -645,8 +643,9 @@ Form component allows you to verify your data, helping you find and correct erro
export default {
data() {
var checkAge = (rule, value, callback) => {
var age = parseInt(value, 10);
if (!value) {
return callback(new Error('Please input the age'));
}
setTimeout(() => {
if (!Number.isInteger(age)) {
callback(new Error('Please input digits'));
@ -656,10 +655,10 @@ Form component allows you to verify your data, helping you find and correct erro
} else {
callback();
}
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
var validaePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password'));
} else {
@ -669,7 +668,7 @@ Form component allows you to verify your data, helping you find and correct erro
callback();
}
};
var validatePass2 = (rule, value, callback) => {
var validaePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'));
} else if (value !== this.ruleForm2.pass) {
@ -686,16 +685,13 @@ Form component allows you to verify your data, helping you find and correct erro
},
rules2: {
pass: [
{ required: true, message: 'Please input the password', trigger: 'blur' },
{ validator: validatePass }
{ validator: validaePass, trigger: 'blur' }
],
checkPass: [
{ required: true, message: 'Please input the password again', trigger: 'blur' },
{ validator: validatePass2 }
{ validator: validaePass2, trigger: 'blur' }
],
age: [
{ required: true, message: 'Please input the age', trigger: 'blur' },
{ validator: checkAge, trigger: 'change' }
{ validator: checkAge, trigger: 'change', trigger: 'blur' }
]
}
};

View File

@ -2,13 +2,14 @@
export default {
data() {
var checkAge = (rule, value, callback) => {
var age = parseInt(value, 10);
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(age)) {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else{
if (age < 18) {
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
@ -110,16 +111,13 @@
},
rules2: {
pass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ validator: validatePass }
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: validatePass2 }
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ required: true, message: '请填写年龄', trigger: 'blur' },
{ validator: checkAge, trigger: 'change' }
{ validator: checkAge, trigger: 'blur' }
]
},
dynamicForm: {
@ -626,7 +624,7 @@
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="ruleForm2.age"></el-input>
<el-input v-model.number="ruleForm2.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit2">提交</el-button>
@ -637,13 +635,14 @@
export default {
data() {
var checkAge = (rule, value, callback) => {
var age = parseInt(value, 10);
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(age)) {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else{
if (age < 18) {
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
@ -678,16 +677,13 @@
},
rules2: {
pass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ validator: validatePass }
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: validatePass2 }
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ required: true, message: '请填写年龄', trigger: 'blur' },
{ validator: checkAge, trigger: 'change' }
{ validator: checkAge, trigger: 'blur' }
]
}
};