欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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这里的refsformrefrefs.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);  
    }

运行截图
ElementUI的form表单验证事件

ps:这几天发烧感冒又是肠胃炎的,身体才是第一位,大家工作的平时还是要好好锻炼身体的