vue 表单自定义校验方法

ゝ一世哀愁。 2022-05-13 14:04 410阅读 0赞

所用组件：Element UI

直接上代码

<el-form :model="editForm" :rules="editFormRules">
         <el-form-item :label="角色名" prop="roleName">
              <el-input v-model="editForm.roleName"></el-input>
         </el-form-item>
    </el-form>
    
    <script>
      export default {
        data () {
            let checkIsNull = (rule, value, callback) => {
                 var l =  value.trim();
                 if(l==0) {
                     callback(new Error('含有非法字符'))
                 } else {
                     callback()
                 }
    
            };
            return {
                editForm: {           
                    roleName: '',
                },
                editFormRules: {
                    roleName: [
                        { required: true, message: '请输入角色名', trigger: 'blur' },
                        { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' },
                    //前两个是自带校验规则，下面这个是自定义checkIsNull为一个方法，当校验时会自动执行此方法。checkIsNull写在data里 return之前
                        { validator: checkIsNull, trigger: 'blur' }
                    ] 
                }           
            }
         }
        
      }

结语：本人所有文章都立志写的简单易懂，戳中问题点。 当然了，简单的同时可能忽略了很多细节与详细，如有不足的地方，还请谅解并指出。  如对文章或实现技术上有问题，可联系我：qq: 1226500260     邮箱：654868284@qq.com

发表评论取消回复

表情：

评论列表（有 0 条评论，410人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用ElementUI对表单元素进行自定义校验

前言在使用ElementUI的表单元素时候，除了做一些简单的非空处理校验，在一些特殊的场合，还需要我们做一些自定义校验。其实ElementUI不仅提供了基本的非空校

蔚落/ 2023年09月24日 19:41/ 0 赞/ 52 阅读

相关 Iview 自定义表单校验

1、定义方法method下面 validateAge(rule, value, callback)\{ console.log(1); if (!value) \{

Bertha 。/ 2023年06月12日 08:39/ 0 赞/ 154 阅读

相关 layui自定义表单校验

layui表单元素的校验只需在元素上加入lay-verify，layui提供了以下值。 <table> <tbody> <tr> <td> <p>1</p>

向右看齐/ 2022年12月13日 04:48/ 0 赞/ 398 阅读

相关 element-ui自定义表单校验规则及常用表单校验

前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

妖狐艹你老母/ 2022年12月11日 07:58/ 0 赞/ 380 阅读

相关 VUE表单校验，金额

rules: { money: [ { required: true, message: '请输入金额', trig

灰太狼/ 2022年09月08日 03:46/ 0 赞/ 223 阅读

相关前端校验表单方法

表单是经常使用到的，那么对于前端表单的校验那如何实现呢。我们通常的想法就是我点击了提交表单的按钮之后触发某一个事件去处理校验表单。那那个事件就是onsubmit()。

ゞ浴缸里的玫瑰/ 2022年06月15日 10:26/ 0 赞/ 293 阅读

相关 layui自定义表单校验

自定义一个金额的校验 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

雨点打透心脏的1/2处/ 2022年06月03日 01:58/ 0 赞/ 437 阅读

相关 vue 表单自定义校验方法

所用组件：Element UI 直接上代码 <el-form :model="editForm" :rules="editFormRules">

ゝ一世哀愁。/ 2022年05月13日 14:04/ 0 赞/ 411 阅读

相关表单自定义一

在网上找了半天表单自定义，也没找到。。最后找到了一个拖拉的例子，在此基础上。。实现了表单的拖拉， //得到控件的绝对位置 function get

以你之姓@/ 2022年04月22日 12:10/ 0 赞/ 245 阅读

相关 Vue自定义表单内容检查rules

Vue自定义表单内容检查rules 先看个例子效果错误时的效果 ![aJKe3ri.jpg

柔光的暖阳◎/ 2022年04月11日 02:40/ 0 赞/ 206 阅读