vue+elementui实现表单验证
表单验证自己也不会,看了看例子,看了看网上其它人写的,实现了能用的状态
<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-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{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时,才说明用户输入的信息都通过了验证,否则没通过验证。