精华内容
下载资源
问答
  • 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表单验证你真的会了吗?vue表单验证(form)validate,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • VUE表单验证.txt

    2020-01-13 11:02:56
    文档包含了常见的表单验证规则,包括是否合法IP地址、是否手机号码或者固话、是否固话、是否手机号码、是否身份证号码、是否邮箱、合法url、自动检验数值的范围、验证数字输入框最大数值、验证是否1-99之间、验证...
  • 主要为大家详细介绍了Vue表单验证插件Vue Validator使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本篇文章主要介绍了详解vue表单验证组件 v-verify-plugin,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 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 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref=formCustom :model=formCustom :rules=ruleCustom :label-width=80> <Input type=text v-model=...
  • 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项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值。 template 账户 prop=userid> <el v-model=addForm.userid></el> 引入接口 import { checkUseridRepeat...
  • vue表单验证插件

    2019-08-10 01:39:36
    在使用vue做项目的过程中,做表单验证通常需要事件绑定、数据双向绑定等才能完成一个验证操作,多个验证往往会有重复代码,所以就想写一个表单验证插件。
  • graceUI js 模块 graceUI 官网 http://grace.hcoder.net 首页视频教程第一... 使用说明 1 将 graceChecker.js 部署到您的项目目录,如 : ...var graceChecker = require("../../../common/graceChecker.js");...验证步骤

    graceUI js 模块

    graceUI 官网

    http://grace.hcoder.net 首页视频教程第一节可观看组件演示 (:

    使用说明

    1 将 graceChecker.js 部署到您的项目目录,如 :

    |_ 项目根目录
        |_ common
            |_ graceChecker.js

    2 引用 graceChecker

    var  graceChecker = require("../../../common/graceChecker.js");

    验证步骤

    1、定义验证规则
    var rule = [
        {name:"数据键名称", checkType: "验证类型", checkRule: "验证规则", errorMsg: "错误提示信息" },
        ......
    ];
    如
    var rule = [
        { name: "nickname", checkType: "string", checkRule: "1,3", errorMsg: "姓名应为1-3个字符" },
        { name: "gender", checkType: "in", checkRule: "男,女", errorMsg: "请选择性别" },
          { name: "bd", checkType: "notsame", checkRule: "请选择", errorMsg: "请选择生日" },
          { name: "aihao", checkType: "notnull", checkRule: "", errorMsg: "请选择爱好" },
          { name: "email", checkType: "email", checkRule: "", errorMsg: "请填写您的邮箱" }
    ];

    验证类型及规则

    1. string
    功能 : 字符串及长度检查
    规则 : 最小长度,最大长度 如 1,3 或 2, 2,代表只检查最短
    2. int
    功能 : 整数及长度检查
    规则 : 最小长度,最大长度 如 1,3
    3. between
    功能 : 数值区间检查
    规则 : 最小值,最大值 如 1,3 或 2.5,1000
    4. betweenD
    功能 : 数值区间检查【整数】
    规则 : 最小值,最大值 如 1,3 或 2,1000
    5. same
    功能 : 等值检查
    规则 : 对应的值
    6. notsame
    功能 : 不等值检查
    规则 : 对应的值
    7. email
    功能 : 邮箱检查
    规则 : 无需设置
    8. phoneno
    功能 : 11位手机号检查
    规则 : 无需设置
    9. zipcode
    功能 : 6位邮编检查
    规则 : 无需设置
    10. reg
    功能 : 正则表达式检查
    规则 : 正则表达式内容 如 "^[0-9]{1,2}$"
    11. in
    功能 : 包含某个字符串的检查
    规则 : 字符串集,如:"北京,上海"
    12. notnull
    功能 : 不为空检查【null 或者 空数组】
    规则 : 无需设置

    演示代码

    <template>
        <view>
            <page-head :title="title"></page-head>
            <view class="uni-padding-wrap">
                <form @submit="formSubmit" @reset="formReset">
                    <view>
                        <view class="uni-title">姓名</view>
                        <view class="uni-list">
                            <view class="uni-list-cell">
                                <input class="uni-input" name="nickname" placeholder="请填写您的昵称" />
                            </view>
                        </view>
                    </view>
                    <view>
                        <view class="uni-title">性别</view>
                        <radio-group class="uni-flex" name="gender">
                            <label>
                                <radio value="男" />男</label>
                            <label>
                                <radio value="女" />女</label>
                        </radio-group>
                    </view>
                    <view>
                        <view class="uni-title">爱好</view>
                        <checkbox-group class="uni-flex" name="loves">
                            <label>
                                <checkbox value="读书" />读书</label>
                            <label>
                                <checkbox value="写字" />写字</label>
                        </checkbox-group>
                    </view>
                    <view class="uni-btn-v uni-common-mt">
                        <button class="btn-submit" formType="submit" type="primary">Submit</button>
                        <button type="default" formType="reset">Reset</button>
                    </view>
                </form>
            </view>
        </view>
    </template>
    
        //来自 graceUI 的表单验证, 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
        var  graceChecker = require("../../../common/graceChecker.js");
        export default {
            data() {
                return {
                    title: '表单验证',
                }
            },
            methods: {
                formSubmit: function (e) {
                    //将下列代码加入到对应的检查位置
                    //定义表单规则
                    var rule = [
                        {name:"nickname", checkType : "string", checkRule:"1,3",  errorMsg:"姓名应为1-3个字符"},
                        {name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
                        {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
                    ];
                    //进行表单检查
                    var formData = e.detail.value;
                    var checkRes = graceChecker.check(formData, rule);
                    if(checkRes){
                        uni.showToast({title:"验证通过!", icon:"none"});
                    }else{
                        uni.showToast({ title: graceChecker.error, icon: "none" });
                    }
                },
                formReset: function (e) {
                    console.log("清空数据")
                    this.chosen = ''
                }
            }
        }
    
    
    <style>
    </style>

    感谢:Vue 表单验证、数据验证 - 简书

    展开全文
  • 主要为大家详细介绍了Vue表单验证插件的制作过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue表单验证.zip

    2019-10-17 11:37:54
    Vue -- iview Form表单验证、以及数据回显 ; Select 选择器 单选验证、以及单选之后获取整个对象的数据(表单默认选择的是Value) DatePicker 日期选择器 type="datetimerange" 表单验证、以及数据回显
  • Ant Design Vue表单验证基本操作

    千次阅读 2022-02-18 13:30:52
    通过rules属性传入约定的验证规则。并将 <a-form-item>的prop属性设置为需校验的字段名即可 formRef.value .validate() 触发效验提示通过进入then,否则进入catch formRef.value.resetFields() 清空效验红色...
  • # Vue表单验证不生效,求大神解惑 表单中有一个下拉框联动的需求(选择库存地,联动批次),但是手动用this.form.batchNo = this.batchNoList[0].value,无法触发表单验证,后来使用$set才起作用,但是不明白其中的...
  • 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 表单验证 html input

    2020-10-11 23:11:57
    如果 你用vue 或者 element 的ui 去验证发现很麻烦。 如果 你只想简单验证: 其实html 自带了验证: 这里 required 就是必填,pattern就是正则规 作者:古红平 链接:...
  • 测试小姐姐让输入框不允许输入空格,安排。  刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是pc端...
  • vue表单验证组件 v-verify-plugin
  • rules: { creditCode: [{ ... [{ required: true, message: '请再次输入密码', trigger: 'blur' }, { validator: validatePass} ] } 不能为NULL且字数限制1-80:/^[\s|\S]{1,80}$/ 转自:vue+element校验规则
  • vue Element 表单验证中 对象有list列表如何验证 正常情况下只需要<el-form-item> 标签中填入prop数据属性即可。 <el-form-item label="接口描述" prop="desc"> <el-input type="textarea" v-...
  • 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

空空如也

空空如也

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

vue表单验证