Form表单校验的几种情况:
1、正常添加校验流程,在form表单加rule
1.在里添加
:rules="Rules"
2.在里添加
prop
,prop对应:model="Form"
的form属性3.然后在data里添加属性rules
4.在点击提交的按钮里进行validate校验
<!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
<!-- 内容主体区 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email" type="email">
<el-input v-model="addForm.email" type="email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部按钮区 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>
data (){
return {
// 添加用户的表单数据
addForm:{
username:'',
password:'',
email:'',
mobile:''
}
}
}
2、自定义校验(正则校验手机号码、邮箱)
用正则表达式
3、添加动态校验
根据form表单的列表选项来判断某些字段是否需要校验,选了A,要校验几个字段必填,选了B又要校验其他几个字段必填,这时候表单的校验需要动态添加,这时候我们需要动态改变
rules
属性相关的校验即可
暂时只遇到这三种情况,有新的就补充。
Element-UI的Form 组件提供了表单验证的功能,只需要通过 rules
属性传入约定的验证规则,并将 Form-Item
的 prop
属性设置为需校验的字段名即可。校验规则参见 async-validator。
validate 方法,对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise。有三个参数 Function(callback: Function(boolean, object))。
以下是vue项目里的源码:
// 点击登录按钮,进行页面跳转
login(){
this.$refs.loginFormRef.validate(async valid=>{
// console.log(valid);
if(!valid) return;
const { data: res } = await this.$http.post("login",this.loginForm)
//如果要请求服务器,要保证API服务器处于运行的状态 1、启动mysql 2、终端 node执行app.js
// if (res.meta.status !== 200) return console.log("登录失败");
if (res.meta.status !== 200) return this.$message.error('登录失败!');
// console.log("成功^_^");
this.$message.success('登录成功^_^');
console.log(res);
window.sessionStorage.setItem("token",res.data.token);
this.$router.push("/home");
});
}
// 编辑用户信息并提交
editRoleInfo(){
this.$refs.addFormRef.validate(async valid =>{
// console.log(valid);
if(!valid) return;
const{data:res} = await this.$http.put('roles/' + this.addForm.roleId,
{roleName:this.addForm.roleName,
roleDesc:this.addForm.roleDesc});
if(res.meta.status !== 200){
return this.$message.error('更新用户失败!');
}
// 关闭对话框
this.editRoleDialogVisible = false;
// 刷新数据列表
this.getRolesList();
// 提示修改成功
this.$message.success('编辑用户成功~~');
})
}
表单里邮箱、电话的验证规则:
使用语法:{validator:验证方法,trigger:验证触发}
data (){
// 验证邮箱的规则
var checkEmail = (rule, value, cb) =>{
// 验证邮箱的正则表达式
const regEmail = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
if(regEmail.test(value)) {
// 合法的邮箱
return cb();
}
cb(new Error('请输入合法的邮箱!'));
}
// 验证手机号的规则
var checkMobile = (rule, value, cb) =>{
// 验证手机号的正则表达式
const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if(regMobile.test(value)) {
return cb();
}
cb(new Error('请输入合法的手机号!'));
}
return {
// 添加表单的验证规则对象
addFormRules:{
email:[
{required: true,
message:'请输入邮箱',trigger:'blur'},
{validator: checkEmail, trigger:'blur'}
],
mobile:[
{required: true,
message:'请输入手机号码',trigger:'blur'},
{validator: checkMobile, trigger:'blur'}
]},
// 修改表单的验证规则对象
editFormRules:{
email:[
{required: true, message: '请输入用户邮箱', trigger: 'blur'},
{validator: checkEmail,trigger:'blur'}
],
mobile:[
{required: true, message: '请输入用户手机号码', trigger: 'blur'},
{validator: checkMobile,trigger:'blur'}
]
}
}
}