标签：click 特殊字符 提交表单 turn efs mode sig 账号 不能
表单验证自己也不会，看了看例子，看了看网上其它人写的，实现了能用的状态
<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时，才说明用户输入的信息都通过了验证，否则没通过验证。
标签：click 特殊字符 提交表单 turn efs mode sig 账号 不能
原文地址：https://www.cnblogs.com/wjbych/p/13097839.html
