精华内容
下载资源
问答
  • vue 表单 验证
    2022-04-12 17:07:32

    1、6位小写字母和数字必须包含两个字母

    rules: [
            { required: true, message: "XXX不能为空", trigger: "blur" },
            { max: 6, message: "最大长度为6位字符", trigger: "blur" },
            {
              pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母
              // /^(?=.*[a-z]{2})[a-z0-9]{6}$/,//连续的两位字母
              message: "支持6位小写字母和数字组合,必须包含2位字母",
              trigger: ["blur"]
            }
          ]

    2、手机号校验

    phone: [
              { required: true, message: '请输入手机号', trigger: 'blur' },
              {
                pattern: /^1[3456789]\d{9}$/,
                message: '请输入正确的手机号码',
                trigger: 'blur'
              }
            ]

    3、只能输入字母和数字

    password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              {
                pattern: /^[0-9a-zA-Z]*$/g,
                message: '只能输入字母和数字',
                trigger: 'blur'
              },
              { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
            ],

    4、只能输入大小字母和数字且必须是字母开头

    userName: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              {
                // pattern: /^[0-9a-zA-Z]*$/g, //只能输入字母和数字
                pattern: /^(?=(?:[^a-z]*[A-z]){1})[0-9a-zA-Z]*$/g,
                message: '只能输入大小字母和数字且必须是字母开头',
                trigger: 'blur'
              },
              { min: 1, max: 20, message: '必须输入1到20位', trigger: 'blur' }
            ]

    更多相关内容
  • vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref=formCustom :model=formCustom :rules=ruleCustom :label-width=80> <Input type=text v-model=...
  • 主要介绍了vue表单验证你真的会了吗?vue表单验证(form)validate,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue表单验证

    2022-03-05 13:17:20
    vue表单验证

    1.表单中添加:rules="rules"

    2.在src中创建文件夹common,创建validate.js

    3.在validate.js中添加约束

     

    4.     在需要表单验证的页面中引入改validate.js                                                                                                                                                                5. 在data中   添加

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

     

     

    展开全文
  • VUE表单验证

    2020-12-21 13:39:20
    VUE表单验证此示例是一个用VUE验证表单字段的示例。表单外观如下图。register.html代码如下:注册注册页面用户名:[[ username_msg ]]密码:[[ pwd_msg ]]确认密码:[[ cpwd_msg ]]手机号:[[ phone_msg ]]同意协议...

    VUE表单验证

    此示例是一个用VUE验证表单字段的示例。

    表单外观如下图。

    register.html代码如下:

    注册

    注册页面

    用户名:

    [[ username_msg ]]

    密码:

    [[ pwd_msg ]]

    确认密码:

    [[ cpwd_msg ]]

    手机号:

    [[ phone_msg ]]

    同意协议

    [[ allow_msg ]]

    register.js代码如下:

    var vm = new Vue({

    el:'#app',

    delimiters:['[[', ']]'],

    data:{

    host:host,

    // 这里对应v-show

    vshow_username:false,

    vshow_pwd:false,

    vshow_cpwd:false,

    vshow_phone:false,

    vshow_allow:false,

    // 这里对应错误信息

    username_msg:'',

    pwd_msg:'',

    cpwd_msg:'',

    phone_msg:'',

    allow_msg:'',

    // 这里的变量对应v-model

    vmodel_username:'',

    vmodel_password:'',

    vmodel_cpwd:'',

    vmodel_phone:'',

    vmodel_allow:true

    },

    methods:{

    // 这里对应@blur

    blur_username:function(){

    // 检查正则匹配

    var re_username = /^[a-zA-Z0-9_-]{5,20}$/;

    if(re_username.test(this.vmodel_username)){

    this.vshow_username = false;

    }

    else{

    this.username_msg = '不符合正则:^[a-zA-Z0-9_-]{5,20}$';

    this.vshow_username = true;

    }

    },

    blur_pwd:function(){

    // 检查正则匹配

    var re_pwd = /^[0-9A-Za-z]{8,20}$/;

    if(re_pwd.test(this.vmodel_password)){

    this.vshow_pwd = false;

    }

    else{

    this.pwd_msg = '不符合正则:^[0-9A-Za-z]{8,20}$';

    this.vshow_pwd = true;

    }

    },

    blur_cpwd:function(){

    // 检查是否与password一样

    if(this.vmodel_password == this.vmodel_cpwd){

    this.vshow_cpwd = false;

    }

    else{

    this.cpwd_msg = 'pwd!=cpwd';

    this.vshow_cpwd = true;

    }

    },

    blur_phone:function(){

    // 检查正则

    var re_phone = /^1[345789]\d{9}$/;

    if(re_phone.test(this.vmodel_phone)){

    this.vshow_phone = false;

    }

    else{

    this.phone_msg = '不符合正则:^1[345789]\d{9}$';

    this.vshow_phone = true;

    }

    },

    }

    });

    v-model可以实时接收input标签中填入的值。在本示例中,vue对象获取v-model可以获取填入input中的值,然后进行验证。

    结果如图:

    展开全文
  • Vue-validator 是Vue表单验证插件,供大家参考,具体内容如下 Vue版本: 1.0.24 Vue-validator版本: 2.1.3 基本使用 <form novalidate> <label for=username>username: <input type=text id=...
  • vue表单验证插件

    2019-08-10 01:39:36
    在使用vue做项目的过程中,做表单验证通常需要事件绑定、数据双向绑定等才能完成一个验证操作,多个验证往往会有重复代码,所以就想写一个表单验证插件。
  • vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值。 template 账户 prop=userid> <el v-model=addForm.userid></el> 引入接口 import { checkUseridRepeat...
  • VUE表单验证.txt

    2020-01-13 11:02:56
    文档包含了常见的表单验证规则,包括是否合法IP地址、是否手机号码或者固话、是否固话、是否手机号码、是否身份证号码、是否邮箱、合法url、自动检验数值的范围、验证数字输入框最大数值、验证是否1-99之间、验证...
  • Ant Design Vue表单验证基本操作

    千次阅读 2022-02-18 13:30:52
    通过rules属性传入约定的验证规则。并将 <a-form-item>的prop属性设置为需校验的字段名即可 formRef.value .validate() 触发效验提示通过进入then,否则进入catch formRef.value.resetFields() 清空效验红色...

    通过 rules 属性传入约定的验证规则。并将 <a-form-item> 的 prop 属性设置为需校验的字段名即可

    formRef.value .validate()  触发效验提示通过进入then,否则进入catch

    formRef.value.resetFields() 清空效验红色提示

    labelCol: label 标签布局,同 <Col> 组件,设置 span offset 值,如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}

     <a-form
          ref="formRef"  //表单验证会用上这个变量
          :model="formState"  //表单数据对象
          :rules="rules"      //表单验证规则
          :label-col="labelCol"
          :wrapper-col="wrapperCol"  //为输入控件设置布局样式时,使用该属性,用法同 labelCol
        >
          <a-form-item :label="a1" name="name">// name表单名称,会作为表单字段 id 前缀使用
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item v-if="a2" :label="a2" name="name2">
            <a-input-password
              autocomplete="new-password"
              v-model:value="formState.name2"
            />
          </a-form-item>
    </a-form>
    
    <script>
        const formRef = ref();
    const formState = ref({
          name: "",
          name5: "",
          name2: "",
        });
       const rules = {//里面写效验规则
          name: {
            required: true,  //是否必填项,设置红色星号
            min: 3,                //最短3个字符
            max: 36,                //最长36个字符
            message: "用户名长度需为3~36之间",  //提示语
          },
          name2: {
            max: 22,
            min: 6,
            required: true,
            pattern: new RegExp(
              /((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))(?!^.*[\u4E00-\u9FA5].*$)^\S{6,22}$/
            ),  //写入正则效验
            message: "密码至少包含数字,字母和字符的两种组合,长度在6-22之间",
          },
    }
       const diaoyong = () => {
          // 表单验证  validate触发表单验证,验证不通过会阻断后续操作
          formRef.value
            .validate()
            .then(() => {
              if (data.value) {
                bianji();
              } else {
                chuangjian();
              }
              console.log("values", formState, toRaw(formState));
            })
            .catch((error) => {
              console.log("error", error);
            });
        };
    return {
          formRef,
          labelCol: { span: 7 },
          wrapperCol: { span: 13 },
          formState,
          diaoyong,
          rules,
        };
    </script>

    展开全文
  • # Vue表单验证不生效,求大神解惑 表单中有一个下拉框联动的需求(选择库存地,联动批次),但是手动用this.form.batchNo = this.batchNoList[0].value,无法触发表单验证,后来使用$set才起作用,但是不明白其中的...
  • 这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js。 当然为什么不找个插件呢? vue-validator呀。 1.我想了下,一个是表单验证是个高度...
  • 本篇文章主要介绍了详解vue表单验证组件 v-verify-plugin,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 表单验证并提交

    千次阅读 2021-04-17 16:21:20
    vue 表单验证并提交 一、常用验证方式1.data 中验证data 数据: 2.行内验证3.引入外部定义的规则 二、表单提交时验证1.表单的提交按钮2.ethods 方法 一、常用验证方式 vue 中表单字段验证的写法和方式有...
  • ## antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效(其他验证失效)##### antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll里面可以接收校验字段数组, options, 和一个回调函数* ...
  • vue 表单验证 html input

    2020-10-11 23:11:57
    如果 你用vue 或者 element 的ui 去验证发现很麻烦。 如果 你只想简单验证: 其实html 自带了验证: 这里 required 就是必填,pattern就是正则规 作者:古红平 链接:...
  • Vue表单验证为正整数

    千次阅读 2021-11-17 10:24:15
    <template> 失物数量 " prop="quantity" class="ibw... formsRuse(){ quantity: [{ validator: checkInt, trigger: "blur", required: true }] } } </script> el-form-item外 需要加form标签且需要绑定验证formsRuse
  • 今天小编就为大家分享一篇vue-form表单验证是否为空值的实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 测试小姐姐让输入框不允许输入空格,安排。  刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是pc端...
  • vue表单验证组件 v-verify-plugin
  • vue 表单验证 密码验证

    千次阅读 2020-12-04 10:13:56
    password: [ { required: true, message: '请输入新... { validator: validatePassword, trigger: 'blur' } ] var validatePassword = (rule, value, callback) => { if (value !== '') { if (value.length &l
  • vue表单验证.zip

    2019-10-17 11:37:54
    Vue -- iview Form表单验证、以及数据回显 ; Select 选择器 单选验证、以及单选之后获取整个对象的数据(表单默认选择的是Value) DatePicker 日期选择器 type="datetimerange" 表单验证、以及数据回显
  • 主要介绍了element 结合vue表单验证下,有值却提示错误的解决办法,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,277
精华内容 8,910
关键字:

vue 表单 验证