如有不解，请加群 897149839
表单验证
在编写项目的过程中，我们经常会用到表单，而且常常需要验证输入的值，
这时候我们就需要写验证规则了。
普通操作
demo的方式是当 input 失去焦点
的时候执行一个验证函数，是否符合规则，符号则弹窗，或者在一个特定位置显示提示语
通过ui框架
如element ui\ iview 这些则是将验证规则放在一个对象中，
通过内置和自定义函数进行验证
废话不多说，上代码
普通操作
//知识点 onBlur="失去焦点事件" onFocus="得到焦点事件"
<input type="text" id="test" onBlur="validateFn('test'),'用户名'">
function validateFn(id,label){
const val = document.getElementById(id).value
/**此处可用正则
如
var reg = new RegExp("^[^0-9]*$");//创建正则表达式， 从头到尾都不是数字
if(reg.test(val)）{//满足正则为真否则是false
//验证不通过代码
}
*/
if(val.length == 0){
alert(label+'不能为空')
/**
不想用弹窗此处可换成某个标签元素
如 :*/
document.getElementById('errInfo').innerHTML=label+'不能为空'
}
}
//其他验证规则类似，可自由发挥，这里不做阐述
重点：
1、创建dom，为输入框添加触发验证的事件，失去焦点是 onBlur=‘Fn()’ 改变时change=‘Fn()’
2、传入定位当前验证元素的相关参数 如：id，提示语等 即onBlur=‘Fn(id,msg)’
3、编写验证规则函数，通过传入的元素定位需要验证的dom值，然后进行判断
4、通过if 条件判断是否为真，根据业务做相应提示， 如弹窗或对应位置显示错误提示语
利用ui框架 element ui或iview等的操作
先上段element ui api的代码,重点看注释
/**
model:表单绑定的数据对象如ruleForm：{ pass："","age":""}
rules:验证规则对象{ key是所有需要验证的变量名，val是验证规则数组，从而可知，一个变量可编写多个验证规则}
如：rules：{
pass：[
{ required: true, message: "此项不能为空", trigger: "blur" },
{第二个验证规则，如过验证规则是个函数则绑定在 ”validator“ 上，即 validator：function(rule, value, callback){此处编写验证代码，详情看下方例子}}
]
}
ref：当前表单标识符
重点是：rules对象里面定义的变量，必须在
<el-form-item label="密码" prop="pass">
的 prop 中传入，否则无法触发验证
*/
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input v-model.number="ruleForm.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
//创建验证函数
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
//callback是回调函数，错误信息写 在new Error（中）
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();//满足条件则直接回调，不写任何信息
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: '',
phone:''
},
rules: {
pass: [
{ validator: validatePass,
//validator为固定值，是绑定验证函数的，validatePass为函数名
trigger: 'blur'
/*
trigger 为触发事件，
即trigger: 'blur'失去焦点 trigger: 'change' 更多事件看element 文档
*/
}
],
checkPass: [
{ validator: validatePass2,
//validator为固定值，是绑定验证函数的，validatePass2为函数名
trigger: 'blur' }
],
age: [
{ validator: checkAge,
//validator为固定值，是绑定验证函数的，checkAge为函数名
trigger: 'blur' }
],
phone:[{
min:7,max:11,trigger: 'blur' //min 和max是element 否装好的验证值，只需填写对应数字即可
},type: "number",
trigger: "blur",//blur失去焦点开始触发验证 change 则是内容改变时触发
required: true,//false为非必填，true为必填
message: "此项不能为空，且必须为数字", //提示信息
transform(value) { //transform这个函数是框架内置函数，不可以变化
//将值转换成固定类型
return Number(value);
}]
}
};
},
methods: {
submitForm(formName) {
/**
formName是前面ref绑定的值 ref="ruleForm"
执行验证函数 this.$refs[formName] 获取表单
.validate执行element表单内置方法
valid是验证规则是否通过的回调参数
*/
this.$refs[formName].validate((valid) => {
if (valid) {//验证通过
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
// 重置表单
this.$refs[formName].resetFields();
}
}
}
</script>
重点是看我上方代码注释
至此结束，如有不懂或者不好请评论，如果能帮助到你，请给个赞，么么哒