http://element.eleme.io/#/zh-CN/component/form里给出了一个form验证的例子,但是都是使用el-form带有的验证规则,怎么使用自己定义的规则进行验证呢?:

.vue的html不变,只是在.ts中的验证中添加自己定义的规则,比如

.vue中

<el-form ref="newUser" :model="newUser" :rules="newUserRule" class="login-container">
      <el-row>
        <el-col :span="10">
          <el-form-item prop="userId">
            <el-input v-model="newUser.userId" placeholder="请输入sso用户名字">
              <template slot="append">@gridsum.com</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-select v-model="newUser.roleType">
            <el-option :value="0" :label="roleText[0]"></el-option>
            <el-option :value="1" :label="roleText[1]"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="primary" @click="addUser()">添 加</el-button>
        </el-col>
      </el-row>
    </el-form>

注意:

  1. el-form-item的 prop="userId"跟el-input的v-model="newUser.userId"要对应

  2. prop一定要写在el-form-item上

  3.  :rules一定要写在el-form上

.ts中

newUserRule = {
    userId: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (/^[a-zA-Z]{4,20}$/.test(value) == false) {
            callback(new Error("用户名由4-20位字母组成"));
          } else {
            callback();
          }
        }, trigger: 'blur' //这里还有blur触发方法; 如果设为none,那么只有this.$refs[formName]['validate']时才会验证
 } ] };

提交表单时,先进性验证是否通过,再进行其他操作,具体实现,给出的链接里面有,但是使用ts的话如果没有声明文件,会提示validate等方法不存在,可以自己去声明,或者换种思路解决:

  addUser() {
    /*   this.$refs[formName]['validate']((valid) => {
       if (valid) {
         alert('submit!');
       } else {
         console.log('error submit!!');
         return false;
       }
     });  */
    if (this.newUser.userId == '') {
      this.$message.error('用户名不能为空!');
    } else if(/^[a-zA-Z]{4,20}$/.test(this.newUser.userId) == false) {
      this.$message.error('用户名不正确!');
    } else {
     //此处可以进行后台提交
    }
  }

elementUI中的el-form怎么使用正则进行验证的更多相关文章

  1. ElementUI中如何实现Form表单内的文字居中

    <el-table :data='orderList' border stripe :align='center' :cell-style='cellStyle' :header-cell-st ...

  2. element-ui中关闭对话框清空验证,清除form表单数据

    对于elementUI中对话框,点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示.今天终于自己查资料解决了,分享给大家 1.首先在你的对话框 取消按钮 加一个c ...

  3. vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框

    vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...

  4. Element-ui 中对表单进行验证

    Element-ui 中对表单(Form)绑定的对象中的对象属性进行校验 如果是直接绑定属性,是可以的,但是绑定对象中的属性就需要特别处理,需要在rules中添加双引号 " "或者 ...

  5. js 中使用el表达式 关键总结:在js中使用el表达式一定要使用双引号

    js 中使用el表达式 关键总结:在js中使用el表达式一定要加双引号 js控制中用到了el表达式,最开始源码如下: var selected = ${requestScope.xxxxForm.re ...

  6. HTML 中按钮作为form表单元素提交特性两则 --- 参HTML考标准分析

    相同name的submit 类型的input提交行为 描述 这种情况, <input type="submit" name="ACTION" value= ...

  7. 谈谈Backbone.js中的el

    小编最近开始接触backbone.js,这个曾经非常优秀的一款MVC前端框架,在学习的过程中,遇到下图的这样一个问题 下面上代码 小编的想法很简单,只是view了一个实例,然后在initalize中调 ...

  8. js文件中使用EL表达式的问题

    var str = '${str}' ; var str = '${obj.属性名}'; 只可以再jsp页面的<script></script>中使用,外部引入的js文件中不能 ...

  9. [ExtJS5学习笔记]第十九节 Extjs5中通过设置form.Panel的FieldSet集合属性控制多个field集合

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39209533 官方例子:http://docs.sencha.com/extjs/5. ...

  10. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

随机推荐

  1. DB2 SQL Error: SQLCODE = -798, SQLSTATE = 428C9

    DB2 SQL Error: SQLCODE = -798, SQLSTATE = 428C9报错是因为 , 你往设置了ALWAYS自增的列里面插了初始值 . ALWAYS自增设置如下. -- 设置主 ...

  2. Linux进程间通信---管道和有名管道

    一.管道 管道:管道是一种半双工的通信方式,数据只能单方向流动,而且只能在具有亲缘关系的进程间使用,因为管道 传递数据的单向性,管道又称为半双工管道.进程的亲缘关系通常是指父子进程关系. 管道的特点决 ...

  3. Apache和Nignx基于三种方式搭建web站点并设置用户访问控制达到优化整个站点性能

    个人用户主页: 1:Vim  /etc/http/con.d/userdir: UserDir  disabled   //个人用户主页开启 UserDir   public_html    //指定 ...

  4. laravel -- 路由

    基本路由 Route::get('/get',function (){ return "this is get"; }); Route::post('/post',function ...

  5. 使用SQLite删除Mac OS X 中launchpad里的快捷方式

    一般情况下,从App Store安装的应用程序,如果应用删除,那么launchpad里对应的图标会一起删除了. 而对于不是通过App Store安装的应用程序,删除应用程序,Launchpad中很可能 ...

  6. python3 练习题100例 (二十七)列表元素改写

    题目内容: 输入一个列表alist,要求列表中的每个元素都为正整数且不超过10: 将列表中的奇数变为它的平方,偶数除以2后打印新的列表(新的列表中所有元素仍都为整数). 可以使用以下实现列表alist ...

  7. Java学习笔记十四:如何定义Java中的类以及使用对象的属性

    如何定义Java中的类以及使用对象的属性 一:类的重要性: 所有Java程序都以类class为组织单元: 二:什么是类: 类是模子,确定对象将会拥有的特征(属性)和行为(方法): 三:类的组成: 属性 ...

  8. Matplotlib 子图的创建

    在matplotlib中,整个图像为一个Figure对象 在Figure对象中可以包含一个或者多个Axes对象  每个Axes对象相当于一个子图了 每个Axes(ax)对象都是一个拥有自己坐标系统的绘 ...

  9. 小程序开发-7-访问api数据与ES6在小程序中的应用

    访问API数据与ES6在小程序中的应用 看待组件的两种观点 组件复用 代码分离-(特别重要) 不能在一个页面写所有的代码,代码分离具有很强的可读性.可维护性 Blink Api 介绍与测试API ur ...

  10. (数据科学学习手札36)tensorflow实现MLP

    一.简介 我们在前面的数据科学学习手札34中也介绍过,作为最典型的神经网络,多层感知机(MLP)结构简单且规则,并且在隐层设计的足够完善时,可以拟合任意连续函数,而除了利用前面介绍的sklearn.n ...