js 页面各种字段验证集合

最新推荐文章于 2022-06-06 14:40:43 发布

panstream

最新推荐文章于 2022-06-06 14:40:43 发布

阅读量382

点赞数

分类专栏： js 前端

本文链接：https://blog.csdn.net/m0_37822534/article/details/103763462

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

/判断输入内容是否为空
function IsNull(){
var str = document.getElementById('str').value.trim();
if(str.length==0){
alert('对不起，文本框不能为空或者为空格!');//请将“文本框”改成你需要验证的属性名称!
}
}

//判断日期类型是否为YYYY-MM-DD格式的类型
function IsDate(){
var str = document.getElementById('str').value.trim();
if(str.length!=0){
var reg = /^(\d{1,4})(-|/)(\d{1,2})\2(\d{1,2})$/;
var r = str.match(reg);
if(r==null)
alert('对不起，您输入的日期格式不正确!'); //请将“日期”改成你需要验证的属性名称!
}
}

//判断日期类型是否为YYYY-MM-DD hh:mm:ss格式的类型
function IsDateTime(){
var str = document.getElementById('str').value.trim();
if(str.length!=0){
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)
alert('对不起，您输入的日期格式不正确!'); //请将“日期”改成你需要验证的属性名称!
}
}

//判断日期类型是否为hh:mm:ss格式的类型
function IsTime()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^((20|21|22|23|[0-1]\d):[0-5][0-9])(:[0-5][0-9])?$/
if(!reg.test(str)){
alert("对不起，您输入的日期格式不正确!");//请将“日期”改成你需要验证的属性名称!
}
}
}

//判断输入的字符是否为英文字母
function IsLetter()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[a-zA-Z]+$/;
if(!reg.test(str)){
alert("对不起，您输入的英文字母类型格式不正确!");//请将“英文字母类型”改成你需要验证的属性名称!
}
}
}

//判断输入的字符是否为整数
function IsInteger()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[-+]?\d*$/;
if(!reg.test(str)){
alert("对不起，您输入的整数类型格式不正确!");//请将“整数类型”要换成你要验证的那个属性名称！
}
}
}

//判断输入的字符是否为双精度
function IsDouble(val)
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[-+]?\d+(.\d+)?$/;
if(!reg.test(str)){
alert("对不起，您输入的双精度类型格式不正确!");//请将“双精度类型”要换成你要验证的那个属性名称！
}
}
}

//判断输入的字符是否为:a-z,A-Z,0-9
function IsString()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[a-zA-Z0-9_]+$/;
if(!reg.test(str)){
alert("对不起，您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称！
}
}
}

//判断输入的字符是否为中文
function IsChinese()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[\u0391-\uFFE5]+$/;
if(!reg.test(str)){
alert("对不起，您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称！
}
}
}

//判断输入的EMAIL格式是否正确
function IsEmail()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$/;
if(!reg.test(str)){
alert("对不起，您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称！
}
}
}

//判断输入的邮编(只能为六位)是否正确
function IsZIP()
{
var str = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^\d{6}$/;
if(!reg.test(str)){
alert("对不起，您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称！
}
}
}

//判断输入的数字不大于某个特定的数字
function MaxValue()
{
var val = document.getElementById('str').value.trim();
if(str.length!=0){
reg=/^[-+]?\d*$/;
if(!reg.test(str)){//判断是否为数字类型
if(val>parseInt('123')) //“123”为自己设定的最大值
{
alert('对不起，您输入的数字超出范围');//请将“数字”改成你要验证的那个属性名称！
}
}
}
}

Phone : /^(((\d{2,3}))|(\d{3}-))?((0\d{2,3})|0\d{2,3}-)?[1-9]\d{6,7}(-\d{1,4})?/
Url : /http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([<>""])*/
QQ : /^[1-9]\d{4,8}/ //说明：除“XXX XX,XXX XX,XXX.00”格式外

//为上面提供各个JS验证方法提供.trim()属性
String.prototype.trim=function(){
return this.replace(/(^\s)|(\s$)/g, "");
}

调用：
<input type="text" name="str" >
<input type="button" value=" 确定 " onClick=""> //onClick中写自己要调用的JS验证函数

验证数字：^[0-9]*$

验证n位的数字：^\d{n}$

验证至少n位数字：^\d{n,}$

验证m-n位的数字：^\d{m,n}$

验证零和非零开头的数字：^(0|[1-9][0-9]*)$

验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$

验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$

验证非零的正整数：^+?[1-9][0-9]*$

验证非零的负整数：^-[1-9][0-9]*$

验证非负整数（正整数 + 0） ^\d+$

验证非正整数（负整数 + 0） ^((-\d+)|(0+))$

验证长度为3的字符：^.{3}$

验证由26个英文字母组成的字符串：^[A-Za-z]+$

验证由26个大写英文字母组成的字符串：^[A-Z]+$

验证由26个小写英文字母组成的字符串：^[a-z]+$

验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$

验证由数字、26个英文字母或者下划线组成的字符串：^\w+$

验证用户名或昵称经常用到: ^[\u4e00-\u9fa5A-Za-z0-9-_]*$ 只能中英文，数字，下划线，减号

验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。

验证是否含有 ^%&',;=?\x22]+

验证汉字：^[\u4e00-\u9fa5],{0,}$

验证Email地址：^\w+[-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$

验证InternetURL：^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?

验证电话号码：^((\d{3,4})|\d{3,4}-)?\d{7,8}$：--正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。

验证身份证号（15位或18位数字）：^\d{15}|\d{}18$

验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：“01”-“09”和“1”“12”

验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为：01、09和1、31。

整数：^-?\d+$

非负浮点数（正浮点数 + 0）：^\d+(.\d+)?$

正浮点数 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$

非正浮点数（负浮点数 + 0） ^((-\d+(.\d+)?)|(0+(.0+)?))$

负浮点数 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9])))$

浮点数 ^(-?\d+)(.\d+)?$

手机号/^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/`
(由于手机号经常更新,请自己分析该表达式是否符合当前需求)

表达式分析：
“/”代表一个正则表达式。
“^”代表字符串的开始位置，“$”代表字符串的结束位置。
“?”代表匹配前面的字符一个或零个，所以这里0?的意思是手机号码可以以0开头或不以0开头。
接下的部分验证11位的手机号码，先从13开始，因为从130-139都有所以可选区间是[0-9]，15开头的号码没有154所以[]里面没有4这个数字，当然也可以写成[0-35-9]，下面18和14开的号码同上。
小括号括起来的代表一个子表达式，里面是4个可选分支分别用“|”来区分开来，在正则中“|”的优先级是最低的，这里每个分支匹配的都是3个字符（一个[]只能匹配一个字符，里面是可选的意思），也就是手机号码的前3位数字，那么后面还有8位数字需要匹配，可以是0-9的任意字符，所以是“[0-9]{8}”，{}中的数字代表匹配前面字符的个数。分析完毕。

在表单验证中，使用正则表达式来验证正确与否是一个很频繁的操作，本文收集整理了15个常用的javaScript正则表达式，其中包括用户名、密码强度、整数、数字、电子邮件地址（Email）、手机号码、身份证号、URL地址、 IPv4地址、十六进制颜色、日期、 QQ号码、微信号、车牌号、中文正则。

1 用户名正则

//用户名正则，4到16位（字母，数字，下划线，减号）
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//输出 true
console.log(uPattern.test("caibaojian"));

2 密码强度正则

//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//输出 true
console.log("=="+pPattern.test("caibaojian#"));

3 整数正则

//正整数正则
var posPattern = /^\d+$/;
//负整数正则
var negPattern = /^-\d+$/;
//整数正则
var intPattern = /^-?\d+$/;
//输出 true
console.log(posPattern.test("42"));
//输出 true
console.log(negPattern.test("-42"));
//输出 true
console.log(intPattern.test("-42"));

4 数字正则

可以是整数也可以是浮点数

//正数正则
var posPattern = /^\d*\.?\d+$/;
//负数正则
var negPattern = /^-\d*\.?\d+$/;
//数字正则
var numPattern = /^-?\d*\.?\d+$/;
console.log(posPattern.test("42.2"));
console.log(negPattern.test("-42.2"));
console.log(numPattern.test("-42.2"));

5 Email正则

//Email正则
var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//输出 true
console.log(ePattern.test("99154507@qq.com"));

6 手机号码正则

//手机号正则
var mPattern = /^1[34578]\d{9}$/; //http://caibaojian.com/regexp-example.html
//输出 true
console.log(mPattern.test("15507621888"));

7 身份证号正则

//身份证号（18位）正则
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
//输出 true
console.log(cP.test("11010519880605371X"));

8 URL正则

//URL正则
var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
//输出 true
console.log(urlP.test("http://caibaojian.com"));

9 IPv4地址正则

//ipv4地址正则
var ipP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
//输出 true
console.log(ipP.test("115.28.47.26"));

10 十六进制颜色正则

//RGB Hex颜色正则
var cPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
//输出 true
console.log(cPattern.test("#b8b8b8"));

11 日期正则

//日期正则，简单判定,未做月份及日期的判定
var dP1 = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
//输出 true
console.log(dP1.test("2017-05-11"));
//输出 true
console.log(dP1.test("2017-15-11"));
//日期正则，复杂判定
var dP2 = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
//输出 true
console.log(dP2.test("2017-02-11"));
//输出 false
console.log(dP2.test("2017-15-11"));
//输出 false
console.log(dP2.test("2017-02-29"));

12 QQ号码正则

//QQ号正则，5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;
//输出 true
console.log(qqPattern.test("65974040"));

13 微信号正则

//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
//输出 true
console.log(wxPattern.test("caibaojian_com"));

14 车牌号正则

//车牌号正则
var cPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
//输出 true
console.log(cPattern.test("粤B39006"));

15 包含中文正则

//包含中文正则
var cnPattern = /[\u4E00-\u9FA5]/;
//输出 true
console.log(cnPattern.test("蔡宝坚"));

panstream

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 页面各种字段验证集合

/判断输入内容是否为空function IsNull(){var str = document.getElementById('str').value.trim();if(str.length==0){alert('对不起，文本框不能为空或者为空格!');//请将“文本框”改成你需要验证的属性名称!}}//判断日期类型是否为YYYY-MM-DD格式的类型function IsDa...
复制链接

扫一扫