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

原创 2017年11月09日 15:32:36

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情况下是非啰嗦的验证。而且样式也不会很丑,当然了任然可以选择自定义样式。这个以后再记录。

效果图如下:


ElementUI之表单验证、数据绑定、路由跳转

1.新建表单组件el-form.vue
  • github_26672553
  • github_26672553
  • 2016年12月09日 16:35
  • 33537

element ui表单验证

elementUI表单验证:表单项增减,表单重置,行内表单样式等
  • museions
  • museions
  • 2017年09月04日 22:32
  • 2979

element ui 表单验证 要主要的问题(小结)

1、处 2、处 应该适合新手吧
  • TionSu
  • TionSu
  • 2017年12月27日 11:05
  • 292

elementui 表单验证

rules: {     account: [{             required: true,             message: '请输入用户名',             ...
  • zjw0742
  • zjw0742
  • 2017年07月18日 14:01
  • 1322

【工作日志】--vue.js下使用element的form表单的注意事项

我的第一篇工作日志,也是刚刚接触vue.js。慢慢来吧。 项目用到了element组件。form表单中,标签中绑定验证规则rules。 绑定v-model,此作用是为了进行数据验证。 而在标签中...
  • FelixJiaWork
  • FelixJiaWork
  • 2017年03月08日 15:46
  • 6787

element表单验证中的 手机号和身份证 验证

表单验证,手机号验证,身份证验证
  • Embrace924
  • Embrace924
  • 2017年10月16日 11:13
  • 984

element-ui表单验证

1. html el-form :model="user" :rules="rules" ref="ruleForm" label-width="80px"> el-form-item la...
  • web_note
  • web_note
  • 2017年12月11日 23:53
  • 34

ElementUI表单验证例子

Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并 Form-Item 的 prop 属性设置为需校验的字段名即可。 (http://element-...
  • dujianxiong
  • dujianxiong
  • 2017年12月29日 15:22
  • 350

表单验证中的各类正则表达式

验证:!reg.test(value) 邮箱: reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-...
  • z69183787
  • z69183787
  • 2012年10月22日 06:58
  • 4513

vue表单验证

最近在做vue的项目,遇到表单验证的问题,验证手机,身份证号,护照号,必填选填等 ----------------------------------------------------------...
  • cuifancastle
  • cuifancastle
  • 2016年11月29日 23:23
  • 7357
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:饿了么组件库element-ui正则表达式验证表单,后端验证表单
举报原因:
原因补充:

(最多只允许输入30个字)