正则验证的一些小列子

var regexEnum =
{
 intege:"^-?[1-9]\\d*$",     //整数
 intege1:"^[1-9]\\d*$",     //正整数
 intege2:"^-[1-9]\\d*$",     //负整数
 num:"^([+-]?)\\d*\\.?\\d+$",   //数字
 num1:"^[1-9]\\d*|0$",     //正数(正整数 + 0)
 num2:"^-[1-9]\\d*|0$",     //负数(负整数 + 0)
 decmal:"^([+-]?)\\d*\\.\\d+$",   //浮点数
 decmal1:"^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$",   //正浮点数
 decmal2:"^-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*)$",  //负浮点数
 decmal3:"^-?([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*|0?.0+|0)$",  //浮点数
 decmal4:"^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*|0?.0+|0$",   //非负浮点数(正浮点数 + 0)
 decmal5:"^(-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*))|0?.0+|0$",  //非正浮点数(负浮点数 + 0)

 email:"^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$", //邮件
 color:"^[a-fA-F0-9]{6}$",    //颜色
 url:"^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$", //url
 chinese:"^[\\u4E00-\\u9FA5\\uF900-\\uFA2D]+$",     //仅中文
 ascii:"^[\\x00-\\xFF]+$",    //仅ACSII字符
 zipcode:"^\\d{6}$",      //邮编
 mobile:"^(13|15)[0-9]{9}$",    //手机
 ip4:"^(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)\\.(25[0-5]|2[0-4]\\d|[0-1]\\d{2}|[1-9]?\\d)$", //ip地址
 notempty:"^\\S+$",      //非空
 picture:"(.*)\\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$", //图片
 rar:"(.*)\\.(rar|zip|7zip|tgz)$",        //压缩文件
 date:"^\\d{4}(\\-|\\/|\.)\\d{1,2}\\1\\d{1,2}$",     //日期
 qq:"^[1-9]*[1-9][0-9]*$",    //QQ号码
 tel:"^(([0\\+]\\d{2,3}-)?(0\\d{2,3})-)?(\\d{7,8})(-(\\d{3,}))?$", //电话号码的函数(包括验证国内区号,国际区号,分机号)
 username:"^\\w+$",      //用来用户注册。匹配由数字、26个英文字母或者下划线组成的字符串
 letter:"^[A-Za-z]+$",     //字母
 letter_u:"^[A-Z]+$",     //大写字母
 letter_l:"^[a-z]+$",     //小写字母
 idcard:"^[1-9]([0-9]{14}|[0-9]{17})$" //身份证
}

var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}

function isCardID(sId){
 var iSum=0 ;
 var info="" ;
 if(!/^\d{17}(\d|x)$/i.test(sId)) return "你输入的身份证长度或格式错误";
 sId=sId.replace(/x$/i,"a");
 if(aCity[parseInt(sId.substr(0,2))]==null) return "你的身份证地区非法";
 sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
 var d=new Date(sBirthday.replace(/-/g,"/")) ;
 if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "身份证上的出生日期非法";
 for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) ;
 if(iSum%11!=1) return "你输入的身份证号非法";
 return true;//aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}

 


//短时间,形如 (13:04:06)
function isTime(str)
{
 var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
 if (a == null) {return false}
 if (a[1]>24 || a[3]>60 || a[4]>60)
 {
  return false;
 }
 return true;
}

//短日期,形如 (2003-12-05)
function isDate(str)
{
 var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
 if(r==null)return false;
 var d= new Date(r[1], r[3]-1, r[4]);
 return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
}

//长时间,形如 (2003-12-05 13:04:06)
function isDateTime(str)
{
 var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
 var r = str.match(reg);
 if(r==null) return false;
 var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
 return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
}

转载于:https://www.cnblogs.com/hubingxu/archive/2012/03/28/2421674.html

<think>好的,用户之前问过关于uView中u-form-item的prop属性的作用,特别是prop="username"的例子。现在用户想了解prop属性在不同场景下的作用和用法,需要具体的示例,除了username以外的其他应用场景。首先,我需要回顾之前回答的内容,确认之前已经解释了prop的核心功能是表单验证标识,绑定字段,匹配规则和错误定位。现在用户需要扩展更多的应用场景,所以需要举出不同的例子,比如邮箱、密码、地址选择等。接下来,我需要考虑如何组织这些例子,确保结构清晰。可能需要分点说明不同的使用场景,每个场景下给出代码示例和说明。同时,用户提到需要具体示例,所以每个例子都要有对应的HTML和JavaScript部分,展示prop如何与model和rules配合。 另外,用户可能希望了解prop在不同类型表单控件中的应用,比如输入框、下拉选择、多选框等。这时候需要展示不同的表单元素如何使用prop属性,比如select、checkbox等,以及对应的验证规则设置。 还要注意用户提到的系统级指令,比如数学公式的格式,但当前问题不涉及数学内容,所以可能不需要处理。但需要确保代码块格式正确,使用正确的语法高亮。然后,考虑到用户可能对联动验证或复杂验证规则感兴趣,比如省市区三级联动,或者密码确认的双字段验证。这时候需要展示prop如何绑定嵌套对象属性,如form.address.province,以及如何设置相应的规则。同时,要确保回答中引用的部分正确添加引用标识,但根据用户当前的问题,可能不需要外部引用,主要依靠代码示例和内部组件逻辑说明。 还需要检查是否需要处理异步验证的例子,比如验证用户名是否存在,但用户这次的问题可能更关注不同场景下的基本用法,所以可能放在后续相关问题中。最后,生成相关问题,确保问题覆盖用户可能感兴趣的扩展方向,如动态表单处理、自定义组件集成、多语言验证消息等。</think>### prop属性在不同场景下的作用与用法解析 #### 一、基础表单字段绑定 1. **邮箱验证场景** ```html <u-form :model="form" :rules="rules"> <u-form-item prop="email" label="电子邮箱"> <u-input v-model="form.email" placeholder="输入工作邮箱" /> </u-form-item> </u-form> ``` ```javascript rules: { email: [ { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }, { pattern: /@company\.com$/, message: '必须使用企业邮箱', trigger: 'change' } ] } ``` 验证逻辑: - 通过`type: 'email'`验证基础格式[^1] - 使用正则表达式验证特定域名的企业邮箱 2. **密码强度验证** ```html <u-form-item prop="password" label="登录密码"> <u-input v-model="form.password" password /> </u-form-item> ``` ```javascript rules: { password: [ { required: true, message: '密码不能为空' }, { validator: (rule, value) => value.length >= 8, message: '密码长度需≥8位' }, { pattern: /^(?=.*[A-Z])(?=.*\d)/, message: '必须包含大写字母和数字' } ] } ``` 验证特点: - 组合使用多种验证方式 - 自定义验证函数实现复杂逻辑 #### 二、复合数据结构处理 3. **地址选择器场景** ```html <u-form-item prop="address.province" label="所在省份"> <u-select v-model="form.address.province" :options="provinceList" /> </u-form-item> ``` ```javascript form: { address: { province: '', city: '' } }, rules: { 'address.province': [ { required: true, message: '必须选择省份', trigger: 'change' } ] } ``` 技术要点: - 使用点语法绑定嵌套对象属性 - 验证规则需与`prop`路径完全匹配 4. **多选标签场景** ```html <u-form-item prop="tags" label="技能标签"> <u-checkbox-group v-model="form.tags"> <u-checkbox v-for="item in tagList" :key="item" :name="item" /> </u-checkbox-group> </u-form-item> ``` ```javascript rules: { tags: [ { type: 'array', min: 3, message: '至少选择3个标签', trigger: 'change' } ] } ``` 验证特性: - 对数组类型数据做长度验证 - 通过`trigger: 'change'`实时响应选择变化 #### 三、动态表单应用 5. **动态添加表单项** ```html <u-form-item v-for="(item, index) in dynamicFields" :key="index" :prop="'contacts.' + index + '.phone'" :label="'联系人' + (index+1)"> <u-input v-model="item.phone" /> </u-form-item> ``` ```javascript form: { contacts: [{ phone: '' }, { phone: '' }] }, rules: { 'contacts.0.phone': [ { required: true, message: '主联系人不能为空' } ] } ``` 实现要点: - 动态生成`prop`路径字符串 - 验证规则需对应动态索引位置 #### 四、特殊验证场景 6. **跨字段联合验证** ```html <u-form-item prop="password" label="新密码"> <u-input v-model="form.password" /> </u-form-item> <u-form-item prop="repassword" label="确认密码"> <u-input v-model="form.repassword" /> </u-form-item> ``` ```javascript rules: { repassword: [ { validator: (rule, value) => value === this.form.password, message: '两次输入不一致' } ] } ``` 验证特点: - 通过自定义验证器访问其他字段值 - 需在`trigger`事件触发时重新验证 7. **时间范围验证** ```html <u-form-item prop="dateRange" label="有效期"> <u-date-picker v-model="form.dateRange" type="daterange" /> </u-form-item> ``` ```javascript rules: { dateRange: [ { validator: (rule, value) => value[1] > new Date(), message: '截止时间需晚于当前时间' } ] } ``` 验证逻辑: - 验证数组类型的时间范围数据 - 使用自定义函数实现动态时间校验
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值