ElementUI的form表单验证事件
程序员文章站
2022-04-25 15:47:10
...
用过了elementUi的表单验证、表单提交之后，个人觉得不是太建议使用。第一：和我们自己写js的繁琐程度差不多，第二，还要读文档增加了学习时间和成本。
废话不多说，直接上代码
html:注意1：代码中的：model顾名思义是我们双向绑定的数据，而ref=”user1”,我们可以把form表单看成是一个类，那么这个类的对象名字就是我们用ref指定的名字，这个名字会在js中调用elementUI的原生态方法中用到，而relus则是我们自定义校验的规则，定义在js的data里。
注意2：若要使用校验则必须在每个中设置prop属性，该属性的名字必须的和relus中定义的校验规则中对应的属性名字一样
<el-row>
<!--注册弹框-->
<el-dialog
class="dialogRegist"
title="加入武林"
:visible.sync="dialogVisible"
width="50%"
center="true"
>
<span>
<el-form :model="user1" ref="user1" label-width="80px" :rules="rules">
<el-form-item label="姓名" prop="name">
<el-input v-model="user1.name" style="width:480px" placeholder="少侠，行走江湖，取个艺名吧"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="radio">
<el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio>
<el-radio :label="3">妖</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="地址">
<el-cascader
expand-trigger="hover"
:props="defaultProps"
:options="addressList"
v-model="user1.address"
width="480px"
>
</el-cascader>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="user1.phone" style="width:480px" placeholder="请输入电话"></el-input>
<!-- @blur="isPhone"-->
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="user1.password" style="width:480px" placeholder="请设置密码"></el-input>
<!-- @blur="isPhone"-->
</el-form-item>
<el-form-item label="确认密码" prop="rePassword">
<el-input v-model="user1.rePassword" style="width:480px" placeholder="请再次输入密码"></el-input>
<!-- @blur="isPhone"-->
</el-form-item>
<!--<el-form-item label="邮箱">
<el-input style="width:480px" placeholder="请输入邮箱"></el-input>
</el-form-item>-->
<el-form-item label="头像">
<el-upload
class="upload-demo"
ref="upload"
:action="api.uploadImg"
:auto-upload="false"
list-type="picture"
:file-list="fileList"
:on-error="uploadError"
:on-success="uploadSuccess"
:limit="1"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-checkbox v-model="checked"></el-checkbox>同意<el-button @click="dialogVisible2=true" type="text">武林协议</el-button>方可加入武林
</el-form-item>
</el-form>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="resetForm('user1')">重 置</el-button>
<el-button @click="submitForm('user1')" type="primary" >确 定</el-button>
<!--<el-button @click="test" type="primary" >确 定</el-button>-->
</span>
</el-dialog>
<!--协议弹框-->
<el-dialog
title="武林协议"
:visible.sync="dialogVisible2"
width="50%"
center="true"
>
<span>
<el-form ref="form" label-width="80px" >
<el-form-item >
<el-input
type="textarea"
:rows="8"
v-model="declaration"
>
</el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="checked"></el-checkbox>同意<el-button type="text">武林协议</el-button>方可加入武林
</el-form-item>
</el-form>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2=false" type="danger" >关闭</el-button>
</span>
</el-dialog>
</el-row>js代码，在js文件的data里定义。
注意1：若是值验证数据是否为空，那么{required: true, message: ‘请输入名讳’, trigger: ‘blur’},就可以，这是elementUI帮我们定义好的。如果有其他的需求，比如手机号，两次密码是否一样等，请看js代码，代码中都有。
注意2：写的时候注意rules中每个属性的格式rules:{属性名称1：[{验证规则1}，{验证规则2}，，，]，属性名称2：[]，，，}
注意3：抛出验证提示信息，只要在回调函数里定义一个Error的类即可，如callback(new Error(‘手机号码格式不正确！’))
注意4：例如如下代码中验证两次密码是否正确的时候，当两次不一样的时候是一个if，之后还要再有一个else，else里面就只有一个callback();
即可（我就是被坑在这里了，没有写else，然后校验不同过可以走到函数里，但是校验通过了却怎么也进不到函数中去。），因为，你验证不正确有提示，那你验证正确了，肯定也有返回值啊，这个返回值就是我们在进行表单提交的时候，的一个boolean类型的返回值，如果rules所有的属性都验证通过那么它会返回一个true的属性，此时才允许提交，否则不允许表单提交。当有至少1条数据验证不同过的时候，它会返回一个boolean字段，和校验为通过的字段。
rules: {
name: [
{required: true, message: '请输入名讳', trigger: 'blur'},
{min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'},
{
validator: function (rule, value, callback) {
$.ajax({
type:"post",
url:app.api.findUserByName,
dateType:"json",
contentType:'application/json',
data:JSON.stringify(app.user1),
success:function(result){
if(!result.success){
callback(new Error(result.data))
} else {
callback(); // 一定要有，这是表单校验成功后的回调，会返回一个boolean值，即true
}
}
});
}, trigger: 'blur'
}
],
phone: [
{required: true, message: '请输入手机号码', trigger: 'blur'},
{
validator: function (rule, value, callback) {
var MobileRegex = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!MobileRegex.test(value)) {
callback(new Error('手机号码格式不正确！')) // 这里错误的信息只要调用callback回调函数，然后在函数里newerror填写错误信息即可
} else {
callback(); // 一定要有，这是表单校验成功后的回调，会返回一个boolean值，即true
}
}, trigger: 'blur'
}
],
address:[
{required: true, message: '请选择地址', trigger: 'blur'},
],
password:[
{
validator:function (rule,value,callback) {
if(value === ''){
callback(new Error("请输入密码"));
}else{
callback();
}
}
}
],
rePassword:[
{
validator:function (rule,value,callback) {
if(value === ''){
callback(new Error("请输入密码"));
}else{
if(value !== app.user1.password){
callback(new Error('两次密码输入不一致'));
}else{
callback();
}
}
}
}
],
},js函数：注意1:上面提到的ref这里的refs.user1.方法名，其实也不难理解，就是对象点方法名。
注意2：在重置表单的时候，就只能重置rules中校验的属性，没有校验的不能清空（我们可以自己清空）
注意3：上面说的回调函数，与这里的 this.$refs[formName].validate。的validate向对应，回调函数返回的数据，就是validate函数的参数
// 注册重置表单
resetForm:function () {
this.$refs['user1'].resetFields(); // 将表单中绑定的变量也清空了
},
// 提交表单
submitForm:function (formName) {
alert("提交...");
this.$refs[formName].validate(function (valid,object) { // 是否校验成功，和未成功的字段
console.log(valid);
/*debugger*/
if(valid){
// 表单中所有有验证的且已经通过的，就可以提交了
if(app.checked){
$.ajax({
type:"post",
url:app.api.addUserUrl,
dateType:"json",
contentType:'application/json',
/*contentType : 'application/x-www-form-urlencoded',*/
data:JSON.stringify(app.user1),
success:function(result){
alert("成功");
}
});
}else{
alert("请同意协议");
}
}
else {
alert("提交失败");
console.log('error submit!!');
//return false; // 有任何一项没有通过验证表单就不能提交
}
});
},controller
@RequestMapping("/ptUser/addPtUser.do")
public void addUser(@RequestBody PtUser user){
ptUserService.insert(user);
}运行截图
ps：这几天发烧感冒又是肠胃炎的，身体才是第一位，大家工作的平时还是要好好锻炼身体的