饿了么组件库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

element ui表单验证

elementUI表单验证:表单项增减,表单重置,行内表单样式等

element ui实际操作

其实从上周就开始写学长的项目了。 感觉之前学的也不是太熟练,js都忘了。。。 这周主要在写前端页面和js表单验证。 上图: 这个是登录界面的js methods: { ...

正则表达式验证表单

  • 2013年04月27日 20:23
  • 11KB
  • 下载

用JavaScrip写正则表达式t对form表单进行验证

document:标签之间 location:url history:前进后退
  • boxyuan
  • boxyuan
  • 2017年05月22日 15:50
  • 95

js用正则表达式来验证表单(比较齐全的资源),JS正则test()方法

在学习网页中的表单验证,顺便学习下正则表达式     在网上找了后发现了一个比较齐全的资源,稍微进行了一下排版     复制代码代码如下:     // 检查是否为有效的真实姓名,只能含有中文或大写的...
  • Baple
  • Baple
  • 2015年01月05日 15:15
  • 8820

js用正则表达式来验证表单

在学习网页中的表单验证,顺便学习下正则表达式 在网上找了后发现了一个比较齐全的资源,附上原作者的链接http://blog.csdn.net/q_zq520/article/details/13613...
  • Tankpt
  • Tankpt
  • 2013年11月16日 19:48
  • 1799

javascript表单(正则表达式)验证大全

javascript表单(正则表达式)验证大全时间:2016年12月29日来源:技术之家 作者:小恩 点击: 267 次 如果你想快速的掌握像数字验证、手机号码验证等这些常用的js数据check,...

表单的js验证框架,只提供提示信息及正则表达式即可自动验证及提示

由于表单验证比较麻烦,所以写个jquery框架进行表单的自动验证及提示,以减少工作量:   1.jquery框架源码:   /*!   * jquery.ckFormValidate-1.0 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:饿了么组件库element-ui正则表达式验证表单,后端验证表单
举报原因:
原因补充:

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