ElementUI的form表单验证事件

用过了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后面跟的就是我们form表单的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：这几天发烧感冒又是肠胃炎的，身体才是第一位，大家工作的平时还是要好好锻炼身体的