具体代码如下所示：

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < > </ >
  <  rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\" rel=\"external nofollow\" >
</head>
<body >
<div id=\"app\">
  <!--此处model的abc 要是下面input 绑定的对象名称, ref 要和提交按钮的submit参数 名称要一致-->
  <el-form size=\"mini\" :model=\"abc\" ref=\"validateRef\">
    <!--此处的prop 和input 中abc的属性名称一致 -->
    <el-form-item label=\"你好\" prop=\"hello\" :rules=\"[{required: true,message:\'请输入\',trigger:\'blur\'}
                             ,{validator:validateCharacter,trigger:\'blur\'}
                             ,{validator:validateFontSize,trigger:\'blur\'}
                             ,{validator:validatePass,trigger:\'blur\'}]\">
      <el-input type=\"text\" v-model=\"abc.hello\" placeholder=\"请输入...\" clearable></el-input>
    </el-form-item>
  </el-form>
  <el-button @click=\"submit(\'validateRef\')\" type=\"primary\" :loading=\"submitLoading\">提交</el-button>
</div>
<!-- import Vue before Element -->
<  src=\"https://unpkg.com/vue/dist/vue.js\"></ >
<!-- import   -->
<  src=\"https://unpkg.com/element-ui/lib/index.js\"></ >
< >
  var context=[[${#request.getContextPath()}]];
  var ArrayMap = new Vue({
    el: \'#app\',
    data: function () {
      return {
        abc: {
          hello: \'\',
        },
        submitLoading:false,
      }
    },
    methods: {
      //特殊字符过滤
      checkSpecificKey(str) {
        var specialKey = \"[`~!#$^&*()=|{}\':;\',\\\\[\\\\].<>/?~！#￥……&*（）——|{}【】‘；：”“\'。，、？]‘\'\";
        for (var i = 0; i < str.length; i++) {
          if (specialKey.indexOf(str.substr(i, 1)) != -1) {
            return false;
          }
        }
        return true;
      },
      //验证字符串
      validatePass(rule,value,callback){
        var that=this;
        $.ajax({
          url:context+\"/abc?name=\"+that.abc.hello,
          type:\"GET\",
          async:false,
          dataType:\"json\",
          contentType:\"application/json;charset=UTF-8\",
          data:{}
        }).done(function(resp){
          if(resp.data.isTrue){
            callback();
          }else{
            callback(new Error(\"名称重复,请重新输入\"))
          }
        })
      },
      //验证字符串
      validateFontSize(rule,value,callback){
        if(value.length<30){
          callback();
        }else{
          callback(new Error(\"字符串长度在1-30之间\"))
        }
      },
      //验证字符串
      validateCharacter(rule,value,callback){
        if(this.checkSpecificKey(value)){
          callback();
        }else{
          callback(new Error(\'请不要输入特殊字符:[`~!#$^&*()=|{}\\\':;\\\',\\\\[\\\\].<>/?~！#￥……&*（）——|{}【】‘；：”“\\\'。，、？]‘\\\'\'))
        }
      },
      submit(data) {
        this.submitLoading=true,
        this.$refs[data].validate((valid) => {
          if (valid) {
            //验证成功,提交
            return true;
          } else {
            //验证失败返回
            return false;
          }
          ;
        })
      },
    },
  })
</ >
</body>
</html>

下面看下vue-element 输入框验证

1.控制输入位数

限制输入为10位，这种方式可以使输入框中输入10位后不能输入后续内容

因为number输入框自动将最后一位小数点忽略不计，因此“.”,\"2.\",\"3.3.\"这三种情况均为正确的输入

<el-form-item label=\"渠道：\" prop=\"channelName\">
 <el-input v-model=\"formData.channelName\" :maxlength=\"10\" placeholder=\"请输入渠道名称\"></el-input>
</el-form-item>
rules:{
    channelName:[
     {required:true,message:\'渠道名称不能为空\',trigger:\'change\'},
    ],
 }

2.控制小数输入位数

input 设置类型为number,step控制步长，正则表达式匹配输入的格式必须为xxx.xxx.

注意，此种方法无法区分不输入的情况，故将提示信息合并为一个。

统一触发方式为change

<el-form-item label=\"短信单价：\" prop=\"price\" class=\"form-price\">
  <el-input type=\"number\" step=\"0.001\" v-model=\"formData.price\" placeholder=\"请输入\"></el-input>
</el-form-item>
//js
  let checkPrice = (rule,value,callback)=>{
    if(value){
     let rgx = /^\\d+(\\.\\d{1,3})?$/;
     if(value.match(rgx)==null){
      return callback(new Error(\'请检查输入格式，不能为空，且最多三位小数\'))
     }else{
      callback();
     }
    }
   };
   rules:{
     price:[
      {required:true,message:\'请检查输入格式，不能为空，且最多三位小数\',trigger:\'change\'},
      {validator:checkPrice,trigger:\'change\'}
     ]
   },

3.验证时间控件选择的时间是否在某个范围

 let checkSendTime = (rule, value, callback) => {
    let hour = value ? value.getHours() :0;
    if (value !== \"\") {
     if (hour < 8 || hour > 21) {
      return callback(new Error(\'请选择8:00~22:00之间发送\'));
     } else {
      callback();
     }
    }
   };
   sendTime:[
      {type:\'date\',required: true, message: \'发送时间不能为空\', trigger: \'blur\'},
      {validator:checkSendTime,trigger:\'blur\'}
     ]

总结

以上所述是小编给大家介绍的element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章