| 饿了么 UI 表单验证 | 您所在的位置：网站首页 › 饿了么源代码 › 饿了么 UI 表单验证 |
饿了么 UI 表单验证
|
饿了么 UI 表单验证
通常我们使用，el-from 这个组件的时候，有两种方式去做表单验证。 一种是使用 el-from 的 rules 做验证。 首先我们需要在引用的 el-from 绑定 一个在 data 中声明的 rules 对象。如下代码： 复制代码 data(){ return { ruleForm: { name: '', region: '', }, loginRules:{ name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], } } } 复制代码如上图需要注意在相同颜色的地方需要保持对应关系。 rules:绑定验证规则的对象，对象的每个属性 需要和model中的属性相互对应 每个属性的值:如上图中rules中的name可以是一个数组，每一条就是一个验证规则 required : 表示是否必填 message : 表示错误时提示给用户的信息 trigger : 表示触发这一个验证规则的事件 常见的有两种('blur' 'change') model: 这个表示表单的数据，用来告诉表单验证应该验证哪一个data对象的值。 prop ：这个是绑定在el-form-item 上的，他的值应该和 他包裹的元素的键值是相同的。 用来在这里显示验证错误的提示信息。 不加则不会验证。当我们定义好验证规则之后我们需要使用$ref调用表单的验证函数触发验证，在promise返回值为true时表示验证通过，如下代码 this.$refs['ruleForm'].validate((valid) => { if (valid) { alert('验证通过'); } else { console.log('验证失败！'); return false; } }); 复制代码除此外官方的文档上没有提到做复杂的验证，比方说你做 邮箱验证 之类的。 在vue-element-admin有这么一段代码。 如果需要验证邮箱或者身份证等...只需要按下面的步骤编写正则的方法就可以实现。 export default { name: 'Login', data() { const validateUsername = (rule, value, callback) => { // 创建一个验证邮箱的正则表达式 const reg = RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/) if (!reg.test(value)) { callback(new Error('请输入正确的邮箱地址')) } else { callback() } } const validatePassword = (rule, value, callback) => { if (value.length < 6) { callback(new Error('')) } else { callback() } } return { loginForm: { username: '', password: '', }, loginRules: { username: [{ required: true, trigger: 'blur', validator: validateUsername }], password: [{ required: true, trigger: 'blur', validator: validatePassword }] }, loading: false, passwordType: 'password', redirect: undefined } }, } 复制代码如上图,验证规则不再是使用配置属性的方式，而是在data方法种定义了一个方法的常量。 方法接收三个参数 如上图的validateUsername 方法： rule:表示验证的规则，上面的代码我们自行验证。 value:表示等待验证的值 callback: 验证结束后需要调用的回调，他将用来展示错误信息，如果没有给这个回调函数传参，则表示不展示错误信息。 其他除了以上两种验证的方式外，我们还可以自行验证表单的信息是否是正确的。 例如： 提交一个带邮箱的表单，在不使用ele-mentui的时候我们如何验证。 export default { name: 'Login', data() { return { loginForm: { username: '', // 邮箱账号 password: '', }, } }, methods: { submit(){ // 创建一个正则表达式 const reg = RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/) if (!reg.test(this.loginForm.username)) { this.$message.warning('请输入正确的邮箱地址') return } //.... 请求接口提交表单 }, } 复制代码如上代码，我们在提交表单之前创建了一个正则表达式，用于验证表单信息种 username的值是否时一个邮箱。 当其不时邮箱的时候，我们提示信息，并且不再执行提交操作。 总结表单验证分两种 一种时UI自带的验证。参考对应UI文档即可。 第二种是在提交操作时对数据进行验证。 根据情况选择合适的方式即可。 |
【本文地址】
公司简介
联系我们