当前位置: 首页 > article >正文

el-input 正则表达式校验输入框不能输入汉字

<el-form :model="data1" :rules="rules" ref="ruleForm" label-width="210px" class="demo-ruleForm">
    <el-form-item label="锯路:" prop="sawKref">
      <el-input class="inptWid" v-model="data1.sawKref"  ></el-input>
  </el-form-item>
</el-form>


<div class="jz_btn">
    <el-button type="primary" style="width:150px" @click="saveSubmit('ruleForm')">保存</el-button>
  </div>

校验不能为空、长度在1到50之间以及不能输入汉字,notChinese校验不能输入汉字 

export default {
  data() {
    const notChinese= (rule, value, callback) => {
	if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          	callback(new Error('不能输入汉字!'));
   		} else {
        callback();
    	}
   }
   callback();
}

    return { 
aa:'',
 rules: {
        sawKref: [
	{required: true, message: "线路编码不能为空", trigger: "blur"},
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur",},
    { validator: notChinese, trigger: 'blur'}
],
}
 
}
 

js部分拦截  this.$refs[formName].validate((valid) => {

 saveSubmit(formName){
      this.$refs[formName].validate((valid) => {
        console.log(valid,'valid')
          if (valid) {
            updateConfig(this.data1).then((res) => {
        if (res.code == 1) {
this.$message.success('更新成功')
this.getList()
        } else {
          this.$message({
            type: 'error',
            message: res.message
          });
        }
      });
          } else {
            this.$message({
            type: 'error',
            message: '必填项不能为空,且不能为汉字'
          });
            return false;
          }
        });


      console.log(this.data1,'data1')
    },


http://www.kler.cn/a/391268.html

相关文章:

  • 振动分析-47-振动信号处理能力提升需要理解和掌握的算法知识体系
  • 支持向量机入门指南:从原理到实践
  • 使用开源在线聊天工具Fiora轻松搭建个性化聊天平台在线交流
  • 【数据库原理】数据增删改查,DML、单表查询、多表连接查询
  • EMS(energy managment system)从0到1
  • uni-app 统一请求处理 请求拦截器 响应拦截器 请求封装
  • 工位管理现代化:Spring Boot企业级框架
  • WPF 应用程序中使用 Prism 框架时,有多种方式可以注册服务和依赖项
  • 最大子数组和
  • vector和docker的区别?
  • RK3568平台开发系列讲解(GPIO篇)基于整数的GPIO接口
  • https网站 请求http图片报错:net::ERR_SSL_PROTOCOL_ERROR
  • 低空载功耗,高能源利用率 BDA5-20W BOSHIDA DCDC
  • 区块链赋能Web3:数据透明与隐私保护的新纪元
  • 如何解决亚马逊商家IP问题:静态住宅IP的优势与选择指南
  • C#界面设计
  • 深度学习中gpu的写法
  • 另一个角度的“业务向前,数据库向后”
  • Rust 整数
  • vue读取本地excel文件并渲染到列表页面
  • 低代码开发
  • Tofu AI视频处理模块视频输入配置方法
  • LeetCode 热题100 之 多维动态规划
  • 在 Flutter 应用中调用后端接口的方法
  • Linux高阶——1109—线程函数线程属性线程分类
  • 【缓存策略】你知道 Write Around(缓存绕过写)这个缓存策略吗?