正则表达式
Posted 爽走不解释
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了正则表达式相关的知识，希望对你有一定的参考价值。
正则表达式
正则表达式主要用在表单校验功能上
正则表达式的好处：
- 简洁的代码
- 严谨的验证文本框中的内容
正则表达式初看起来可能比较懵逼，但其实只要懂得那么个意思就不难看懂了
定义正则表达式主要有两种方式
- 普通方式
- 构造函数
语法：
普通：
var reg=/表达式/附加参数
构造
var reg=new RegExp("表达式","附加参数")
注意：通常使用普通方式
这里啰嗦一下RegExp对象的属性和方法:
RegExp对象的属性
| 方法 | 描述 |
|---|---|
| exec | 检索字符中是正则表达式的区配，返回找到的值，并确定其位置 |
| test | 检索字符串中指定的值，返回true或false |
RegExp对象的方法
| 属性 | 描述 |
|---|---|
| global | RegExp对象是否具有标志g |
| ignoreCase | RegExp对象是否具有标志i |
| multiline | RegExp对象是否具有标志m |
表达式的模式又分为两种
- 简单模式
- 复合模式
示例：
简单
var reg=/china/;
var reg=/abc8/;
复合
var reg=/^\\w+$/;
var reg=/^\\w+@\\w+\\.[a-zA-Z]2,3(\\.[a-zA-Z]2,3)?$/;
一般使用复合模式
上面的一堆符号是什么意思呢？现在就来解释一下常用的
| 符号 | 描述 |
|---|---|
| /…/ | 代表一个模式的开始和结束 |
| ^ | 匹配字符串的开始 |
| $ | 匹配字符串的结束 |
| \\s | 任何空白字符 |
| \\S | 任何非空白字符 |
| \\d | 匹配一个数字字符，等价于[0-9] |
| \\D | 除了数字之外的任何字符，等价于[^0-9] |
| \\w | 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_] |
| \\W | 任何非单字字符，等价于[^a-zA-z0-9_] |
| n | 匹配前一项n次 |
| n, | 匹配前一项n次，或者多次 |
| n,m | 匹配前一项至少n次，但是不能超过m次 |
| * | 匹配前一项0次或多次，等价于0, |
| + | 匹配前一项1次或多次，等价于1, |
| ？ | 匹配前一项0次或1次，也就是说前一项是可选的，等价于0,1 |
| … | … |
更多的请参考中文文档=====》gogogo
然后来看具体的实例：
<form action="" method="post" name="myform">
<dl>
<dt>用户名：</dt>
<dd><input id="user" type="text" /><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></dd>
</dl>
<dl>
<dt>密码：</dt>
<dd><input id="pwd" type="password" /><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></dd>
</dl>
<dl>
<dt>确认密码：</dt>
<dd><input id="repwd" type="password"/><div id="repwd_prompt"></div></dd>
</dl>
<dl>
<dt>电子邮箱：</dt>
<dd><input id="email" type="text"/><div id="email_prompt"></div></dd>
</dl>
<dl>
<dt>手机号码：</dt>
<dd><input id="mobile" type="text" /><div id="mobile_prompt"></div></dd>
</dl>
<dl>
<dt>生日：</dt>
<dd><input id="birth" type="text"/><div id="birth_prompt"></div></dd>
</dl>
<dl>
<dt> </dt>
<dd><input name="" type="image" src="images/register.jpg" class="btn" /></dd>
</dl>
</form>
js代码==============================
<script>
$(document).ready(function()
/*用户名验证*/
$("#user").blur(function ()
var user = $(this).val();
var reg = /^[a-zA-Z][a-zA-Z0-9]3,15$/;
if (reg.test(user) == false)
$("#user_prompt").html("用户名不正确");
return false;
$("#user_prompt").html("");
return true;
)
/*密码验证*/
$("#pwd").blur(function ()
var pwd = $(this).val();
var reg = /^[a-zA-Z0-9]4,10$/;
if (reg.test(pwd) == false)
$("#pwd_prompt").html("密码不能含有非法字符，长度在4-10之间");
return false;
$("#pwd_prompt").html("");
return true;
)
$("#repwd").blur(function ()
var repwd = $("#repwd").val();
var pwd = $("#pwd").val();
if (pwd != repwd)
$("#repwd_prompt").html("两次输入的密码不一致");
return false;
$("#repwd_prompt").html("");
return true;
)
/*验证邮箱*/
$("#email").blur(function ()
var email = $(this).val();
var reg = /^\\w+@\\w+(\\.[a-zA-Z]2,3)1,2$/;
if (reg.test(email) == false)
$("#email_prompt").html("Email格式不正确，例如web@sohu.com");
return false;
$("#email_prompt").html("");
return true;
)
/*验证手机号码*/
$("#mobile").blur(function ()
var mobile = $(this).val();
var regMobile = /^1\\d10$/;
if (regMobile.test(mobile) == false)
$("#mobile_prompt").html("手机号码不正确，请重新输入");
return false;
$("#mobile_prompt").html("");
return true;
)
/*生日验证*/
$("#birth").blur(function ()
var birth = $(this).val();
var reg = /^((19\\d2)|(200\\d)|(201[0-6]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\\d|3[0-1])$/;
if (reg.test(birth) == false)
$("#birth_prompt").html("生日格式不正确，例如1980-5-12或1988-05-04");
return false;
$("#birth_prompt").html("");
return true;
)
)
</script>
使用HTML5的方式验证表单
有如下两种新方式:
- HTML5新特性
- validity属性
HTML5新特性
| 属性 | 描述 |
|---|---|
| placeholder | 提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失 |
| required | 规定输入域不能为空 |
| pattern | 规定验证input域的模式（正则表达式） |
代码示例：
<input type="text" id="uName" placeholder="英文、数字长度为6-10个字符" required pattern="[a-zA-Z0-9]6,10" />
<input type="password" id="pwd" placeholder="长度为6-16个字符" required pattern="[a-zA-Z0-9]6,16"/>
validity属性
| 属性 | 描述 |
|---|---|
| customError | 设置为 true, 如果设置了自定义的 validity 信息。 |
| patternMismatch | 设置为 true, 如果元素的值不匹配它的模式属性。 |
| rangeOverflow | 设置为 true, 如果元素的值大于设置的最大值。 |
| rangeUnderflow | 设置为 true, 如果元素的值小于它的最小值。 |
| stepMismatch | 设置为 true, 如果元素的值不是按照规定的 step 属性设置。 |
| tooLong | 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。 |
| typeMismatch | 设置为 true, 如果元素的值不是预期相匹配的类型。 |
| valueMissing | 设置为 true，如果元素 (required 属性) 没有值。 |
| valid | 设置为 true，如果元素的值是合法的 |
直接看代码实例：
<form action="" method="post" name="myform">
<dl>
<dt>用户名：</dt>
<dd><input id="user" type="text" placeholder="以英文字母开头4～16个英文字母或数字" required pattern="[a-zA-Z][a-zA-Z0-9]3,15"/></dd>
</dl>
<dl>
<dt>密码：</dt>
<dd><input id="pwd" type="password" placeholder="4～10个英文字母或数字" required pattern="[a-zA-Z0-9]4,10"/></dd>
</dl>
<dl>
<dt>确认密码：</dt>
<dd><input id="repwd" type="password"/></dd>
</dl>
<dl>
<dt>电子邮箱：</dt>
<dd><input id="email" type="email"/></dd>
</dl>
<dl>
<dt>手机号码：</dt>
<dd><input id="mobile" type="text" pattern="1\\d10" /></dd>
</dl>
<dl>
<dt>生日：</dt>
<dd><input id="birth" type="text" pattern="((19\\d2)|(200\\d)|(201[0-6]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\\d|3[0-1])"/></dd>
</dl>
<dl>
<dt> </dt>
<dd><input name="" type="image" src="images/register.jpg" class="btn" /></dd>
</dl>
</form>
js代码===========================
<script>
$(document).ready(function()
$(".btn").click(function()
var u=document.getElementById("user");
if(u.validity.valueMissing==true)
u.setCustomValidity("用户名不能为空");
else if(u.validity.patternMismatch==true)
u.setCustomValidity("用户名必须是字母开头的4~16位的英文字母和数字");
else
u.setCustomValidity("");
var pwd=document.getElementById("pwd");
if(pwd.validity.valueMissing==true)
pwd.setCustomValidity("密码不能为空");
else if(pwd.validity.patternMismatch==true)
pwd.setCustomValidity("密码必须是4~10位的英文字母和数字");
else
pwd.setCustomValidity("");
var email=document.getElementById("email");
if(email.validity.valueMissing==true)
email.setCustomValidity("邮箱不能为空");
else if(email.validity.typeMismatch==true)
email.setCustomValidity("邮箱格式不正确");
else
email.setCustomValidity("");
var mobile=document.getElementById("mobile");
if(mobile.validity.patternMismatch==true)
mobile.setCustomValidity("手机必须是1开头的11位数字");
else
mobile.setCustomValidity("");
var birth=document.getElementById("birth");
if(birth.validity.patternMismatch==true)
birth.setCustomValidity("生日的年份必须为1900～2016之间，格式为1980-5-12或1988-05-04");
else
birth.setCustomValidity("");
)
)
</script>
以上是关于正则表达式的主要内容，如果未能解决你的问题，请参考以下文章