vue+elementui实现表单验证

Posted 2020-12-10 wjbych

表单验证自己也不会，看了看例子，看了看网上其它人写的，实现了能用的状态

<el-form :label-position="right" label-width="80px" :model="zhuce" :rules="rules" ref="ruleForm">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="zhuce.name"></el-input>
            </el-form-item>
            <el-form-item label="所属公司">
                <el-select v-model="zhuce.value" placeholder="请选择所属公司" style="width:100%">
                    <el-option v-for="item in gongsi"  :key="item.gscode" :label="item.gsname" :value="item.gscode"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="zhuce.phone" placeholder="请输入11位数的手机号码"  maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input v-model="zhuce.pwd" placeholder="请输入6~15位的密码" show-password></el-input>
            </el-form-item>
        </el-form>
        <div class="divCenter">
            <el-button type="success" @click="SignUp(‘ruleForm‘)">账号注册</el-button>
        </div>

 zhuce:{
                value:‘‘,
                name:‘‘,
                pwd:‘‘,
                phone:‘‘,
            },
            rules: {
                name: [
                        { required: true, message: ‘请输入姓名‘, trigger: ‘blur‘ },
                        { min: 2, max: 10, message: ‘长度在 2 到 10 个字符‘, trigger: ‘blur‘ },
                        {
                            required: true,
                            pattern: /^[u4e00-u9fa5_a-zA-Z0-9.·-]+$/,
                            message: ‘姓名不支持特殊字符‘,
                            trigger: ‘blur‘
                        }
                    ],
                phone:[
                        { required: true, message: ‘请输入手机号码‘, trigger: ‘blur‘ }, { required: true, pattern: /^((13|14|15|16|17|18)[0-9]{1}d{8})|((166|199|198)[0-9]{1}d{7})$/, message: ‘请输入正确的手机号码‘, trigger: ‘blur‘ }
                    ],
                pwd:[
                        { required: true, message: ‘请输入密码‘, trigger: ‘blur‘ },
                        { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-ZW_]+$)(?![a-z0-9]+$)(?![a-zW_]+$)(?![0-9W_]+$)[a-zA-Z0-9W_]{6,15}$/, message: ‘密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 6-15位，密码不能包含 用户名，区分大小写)‘ }
                ]
                },
            
        }

需要注意的地方

1、数据的绑定与验证

在el-form中，:model中绑定的是数据，:rules中绑定的是验证的规则，ref则是在提交表单时对验证数据结果的检查。

2、验证具体的输入框

只要数据绑定与验证的规则写好了，具体在验证时，只需要让prop等于具体的规则名就可以了，比如验证姓名，那么它的规则是rules下的name，那么只需要写成prop="name"就可以了

3、数据提交时的验证

用户在文本框中进行输入时，就会验证输入的数据是否 符合规定，但是提交时怎么知道这些数据是否符合规定了，怎么判断了，这时就需要用到el-form中ref设置的参数了。

SignUp(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
               this.$message.success("注册功能正在设计中...");
            } else {
               return false;
            }
            });
            
},

只有valid为true时，才说明用户输入的信息都通过了验证，否则没通过验证。