正则表达式
替换：replace - 字符串.replace(正则对象,新的内容)
提取：
match - 字符串.match(正则对象)
正则对象.exec(字符串)
验证：
search - 字符串.search(正则对象)
正则对象.test(字符串)
- 手机号验证
var str = "13212345678";
var reg = /^1[3-9][0-9]{9}$/;
var bool = reg.test(str)
console.log(bool);
qq号验证
var reg = /^[1-9]\d{5,10}$/;
var qq = "3139688500";
var bool = reg.test(qq)
console.log(bool);
- 网易邮箱的规则
var reg = /^[a-zA-Z]\w{5,17}@163\.com$/;
var email = "aaa123457890@163.com";
在正则表达式中，使用 | 表示或者
var emailReg = /(^[1-9]\d{5,10}@qq\.com$)|(^[a-zA-Z]\w{5,17}@((163|126)\.com|yeah\.net)$)/;
var bool = emailReg.test(email)
console.log(bool);
表单验证demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
table{
margin: 50px auto;
}
/* td{
width: 150px;
}
td:first-child{
width: 70px;
}
caption{
margin-left: 10px;
} */
</style>
<form action="">
<table>
<caption><h2>注册</h2></caption>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"></td>
<td class="untd"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
<td class="pwdtd"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="repassword"></td>
<td class="rptd"></td>
</tr>
<tr>
<td>手机号：</td>
<td><input type="text" name="tel"></td>
<td class="ttd"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email"></td>
<td class="etd"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册"></td>
<td></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
/*
每个文本框当失去焦点的时候，就要得到验证的结果，将结果放到每一行的最后一个td中
提示信息12px
验证成功，就写成功，设置绿色
验证失败，就写出为什么失败？红色
所有文本框不能为空
用户名：
只能用字母开头，由数字和字母组成，位数6~12位
密码：
6~16位，由字母、数字、下划线组成
确认密码要和密码保持一致
*/
var form = document.querySelector('form')
var usernameInput = document.querySelector('[name="username"]')
var passwordInput = document.querySelector('[name="password"]')
var repasswordInput = document.querySelector('[name="repassword"]')
var telInput = document.querySelector('[name=tel]')
var emailInput = document.querySelector('[name=email]')
var untd= document.querySelector('.untd')
var pwdtd= document.querySelector('.pwdtd')
var rptd= document.querySelector('.rptd')
var ttd= document.querySelector('.ttd')
var etd= document.querySelector('.etd')
usernameInput.onblur = function(){
var reg = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/;
if(!reg.test(this.value)){
untd.innerText = '×用户名不符合规范'
falsetdstyle(untd);
return false;
}else{
untd.innerText = '√用户名可注册'
truetdstyle(untd);
}
}
usernameInput.onfocus = function(){
untd.innerText = ''
usernameInput.value = ''
}
passwordInput.onblur = function(){
var reg = /\w{6,16}/;
if(!reg.test(this.value)){
pwdtd.innerText = '×密码不符合规范'
falsetdstyle(pwdtd);
return false;
}else{
pwdtd.innerText = '√密码输入成功'
truetdstyle(pwdtd);
}
}
passwordInput.onfocus = function(){
pwdtd.innerText = ''
passwordInput.value = ''
}
repasswordInput.onblur = function(){
if(repasswordInput.value !== passwordInput.value){
rptd.innerText = '×密码错误'
falsetdstyle(rptd);
return false;
}else{
rptd.innerText = '√密码正确'
truetdstyle(rptd);
}
}
repasswordInput.onfocus = function(){
rptd.innerText = ''
repasswordInput.value = ''
}
telInput.onblur = function(){
var reg = /^1[3-9]\d{9}$/;
if(!reg.test(this.value)){
ttd.innerText = '×手机号不符合规范'
falsetdstyle(ttd);
return false;
}else{
ttd.innerText = '√手机号输入成功'
truetdstyle(ttd);
}
}
telInput.onfocus = function(){
ttd.innerText = ''
telInput.value = ''
}
emailInput.onblur = function(){
var reg = /(^[1-9]\d{5,10}@qq\.com$)|(^[a-zA-Z]\w{5,17}@((163|126)\.com|yeah\.net)$)/;
if(!reg.test(this.value)){
etd.innerText = '×邮箱地址不符合规范'
falsetdstyle(etd);
return false;
}else{
etd.innerText = '√邮箱地址输入成功'
truetdstyle(etd);
}
}
emailInput.onfocus = function(){
etd.innerText = ''
emailInput.value = ''
}
function falsetdstyle(ele){
setStyle(ele,{
fontSize:"12px",
color:"#f00",
margin:"0 0 0 15px",
})
}
function truetdstyle(ele){
setStyle(ele,{
fontSize:"12px",
color:"#0f0",
margin:"0 0 0 15px",
})
}
function setStyle(ele,styleObj){
for(var attr in styleObj){
ele.style[attr] = styleObj[attr];
}
}
</script>
</html>
