前端输入框校验限制不能输入中文

本文主要是介绍前端输入框校验限制不能输入中文，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

记录自己工作遇到的小小问题

一般我们在做表单的时候都会有表单校验,通常都是用element提供的表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。如下面这样

rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ]
        }
复制代码

这里对name跟region两个字段进行校验,如果不符合规范就提示相应的信息,在这里我们对name字段不允许输入中文,在rules里面name字段加一个规则,如下

rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
            { validator: this.checkData, trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ]
        }
复制代码

checkData是个方法,写在methods中即可

 checkData(rule, value, callback) {
            if (value) {
                if (/[\u4E00-\u9FA5]/g.test(value)) {
                    callback(new Error('不能为中文!'))
                } else {
                    callback()
                }
            }
            callback()
        }
复制代码

当然也有很多其他的方法,这只是我当时采用的.如果有更好的方法希望告诉我. 在这里记录一下自己工作遇到的小问题 嘻嘻~

这篇关于前端输入框校验限制不能输入中文的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！