improve form validate docs

pull/1207/head
baiyaaaaa 2016-11-18 18:50:29 +08:00 committed by Leopoldthecoder
parent 897ec4650c
commit 3da91213ce
2 changed files with 34 additions and 42 deletions

View File

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

View File

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