vue 输入框验证

最新推荐文章于 2025-03-21 15:18:07 发布

lvzekun-IT

最新推荐文章于 2025-03-21 15:18:07 发布

阅读量1.5k

点赞数

分类专栏：前端基础

本文链接：https://blog.youkuaiyun.com/m0_37727198/article/details/100369232

版权

前端基础专栏收录该内容

34 篇文章

订阅专栏

本文介绍了Vue中进行输入框验证的几种常见方法，包括邮箱验证、禁止空格验证及手机号码验证，帮助开发者提升表单数据的准确性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.邮箱验证：

 validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请正确填写邮箱'));
                                } else {
                                    if (value !== '') {
                                        var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                                        if(!reg.test(value)){
                                            callback(new Error('请输入有效的邮箱'));
                                        }
                                    }
                                    callback();
                                }
                            }, trigger: 'change'

2.空格验证：

  validator: (rule, value, callback) => {
                                if (!value.replace(/\s*/g, "")) {
                                    callback(new Error('内容不能为空格'));
                                } else {
                                    callback()
                                }
                            }, trigger: 'blur',

3.验证手机号

const validateMobileInput = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号码必填！'))
        } else if(value){
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        } else {
          callback()
        }
      };