饿了么组件库element-ui正则表达式验证表单，后端验证表单

来源：互联网发布：安川伺服软件下载编辑：程序博客网时间：2024/05/22 13:10

vue+elementui 提高开发效率，以下为form表单验证例子。包含自定义验证等。

1. 以中国大陆手机号验证为例

// 这是组价的代码<el-form-item prop="mobile">    <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="请输入手机号"></el-input></el-form-item>// 这是rules的代码mobile: [    { validator: validateMobile, trigger: 'blur' },    { required: true, message: '请输入手机号', trigger: 'blur' },    { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }],

在element-ui的源码中搜索blur，你会很容易看到除了blur 还有focus、input，多个使用“,”分隔

2. 表单局部提交后端验证

在一些输入项目较多的表单提交中，比如说注册时填写的用户名，通常我们会对用户名是否重复进行验证，这是就需要调用服务来验证，这种略显复杂的验证，就需要自定义验证规则来实现。看下面的代码：

 function validateMobile(rule, value, callback) {
                       var MobileRegex = /^1[0-9]{10}$/;
                         if (!MobileRegex.test(value)) {
                             callback(new Error('手机号码格式不正确！'))
                         } else {
                             callback();
                         }
                     }

注意：自定义规则中每个执行流程中都必须附带callback()，这样才能明确通过验证的情况下去掉输入框上的loading。要显示的错误提示则可以new Error（“xxxx”）即可。

3. 综合来看

通常可以把所有规则都写在自定义的规则中，即可实现较为复杂的验证，实际上我们可以再validatePass里面调用根实例下所有data methods...，一个很简单的例子是实现两次输入的密码是否相同的验证，看下面的代码：

     <div id="app">             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">                  <el-form-item label="活动名称" prop="name">                    <el-input v-model="ruleForm.name"></el-input>                  </el-form-item>                 <el-form-item label="手机号码"  prop="mobile">                     <el-input v-model="ruleForm.mobile"></el-input>                 </el-form-item>                  <el-form-item label="活动区域" prop="region">                    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">                      <el-option label="区域一" value="shanghai"></el-option>                      <el-option label="区域二" value="beijing"></el-option>                    </el-select>                  </el-form-item>                  <el-form-item label="活动时间" required>                    <el-col :span="11">                      <el-form-item prop="date1">                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>                      </el-form-item>                    </el-col>                    <el-col class="line" :span="2">-</el-col>                    <el-col :span="11">                      <el-form-item prop="date2">                        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>                      </el-form-item>                    </el-col>                  </el-form-item>                  <el-form-item label="即时配送" prop="delivery">                    <el-switch v-model="ruleForm.delivery"></el-switch>                  </el-form-item>                  <el-form-item label="活动性质" prop="type">                   <el-checkbox-group v-model="ruleForm.type">                      <el-checkbox label="1"  name="type">美食/餐厅线上活动</el-checkbox>                      <el-checkbox label="2" name="type">地推活动</el-checkbox>                      <el-checkbox label="3" name="type">线下主题活动</el-checkbox>                      <el-checkbox label="4" name="type">单纯品牌曝光</el-checkbox>                    </el-checkbox-group>                  </el-form-item>                  <el-form-item label="特殊资源" prop="resource">                    <el-radio-group v-model="ruleForm.resource">                      <el-radio label="线上品牌商赞助"></el-radio>                      <el-radio label="线下场地免费"></el-radio>                    </el-radio-group>                  </el-form-item>                  <el-form-item label="活动形式" prop="desc">                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>                  </el-form-item>                  <el-form-item>                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>                    <el-button @click="resetForm('ruleForm')">重置</el-button>                  </el-form-item>          </el-form>        </div>        <script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script><script src="//unpkg.com/element-ui@2.0.2/lib/index.js"></script><script  type="text/javascript">    var app = new Vue({        el: "#app",        data: {            ruleForm: {                name: '',                mobile: "",                region: '',                date1: '',                date2: '',                delivery: false,                type: [],                resource: '',                desc: ''            },            rules: {                name: [                  { required: true, message: '请输入活动名称', trigger: 'blur' },                  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }                ],                mobile: [                  { required: true, message: '请输入手机号码', trigger: 'blur' },                 {                     validator: function (rule, value, callback) {                         var MobileRegex = /^1[0-9]{10}$/;                         if (!MobileRegex.test(value)) {                             callback(new Error('手机号码格式不正确！'))                         } else {                             callback();                         }                     }, trigger: 'blur'                 }                ],                region: [        { required: true, message: '请选择活动区域', trigger: 'change' }                ],                date1: [            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }                ],                date2: [                  { type: 'date', required: true, message: '请选择时间', trigger: 'change' }                ],                type: [                  { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }                ],                resource: [                  { required: true, message: '请选择活动资源', trigger: 'change' }                ],                desc: [                  { required: true, message: '请填写活动形式', trigger: 'blur' }                ]            }        }, methods: {            submitForm: function (formName) {                var Self = this;                this.$refs[formName].validate(function (valid) {                    if (valid) {                        alert(JSON.stringify(Self.ruleForm));                    } else {                        console.log('error submit!!');                        return false;                    }                });            },            resetForm: function (formName) {                this.$refs[formName].resetFields();            }        }    });</script>

就这么简单就可以实现非vuejs情况下是非啰嗦的验证。而且样式也不会很丑，当然了任然可以选择自定义样式。这个以后再记录。

效果图如下：

阅读全文

0 0