溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“javascript中表單正則應用的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“javascript中表單正則應用的示例分析”這篇文章吧。
以下是之前練習正則表達式時候做的js表單測試.
input里的value用.test()比較以后，處理正則和需求，反饋，代碼欠優化，但功能完善，僅供參考學習
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新用戶注冊</title> <link rel="stylesheet" href="./css/regForm.css" type="text/css"> <script type="text/javascript" src="js/regForm.js"></script> <!--外部樣式和JS*--> </head> <body> <div id="section"> <form action="" method="get" id="form"> <table id="table"> <tr> <td>用戶名</td> <td><input id="username" type="text" class="text"></td> <td><div class="icon" id="usernameicon"></div></td> </tr> <tr> <td>Email</td> <td><input type="text" class="text" id="email"></td> <td><div class="icon" id="emailicon">(請輸入正確的Email地址)</div></td> </tr> <tr> <td>密碼</td> <td><input type="password" id="password"></td> <td><div id="pwicon" class="icon">(請輸入強度較高的密碼)</div></td> </tr> <tr> <td>密碼強度</td> <td> <div class="pwstrength" id="low">弱</div> <div class="pwstrength" id="middle">中</div> <div class="pwstrength" id="strong">強</div> </td> <td></td> </tr> <tr> <td>確認密碼</td> <td><input id="cfpw" type="password" class="text" value=""></td> <td><div class="icon" id="cfpwicon"></div></td> </tr> <tr> <td>MSN</td> <td><input id="msn" type="text" class="text"> </td> <td><div class="icon" id="msnicon"></div></td> </tr> <tr> <td>QQ</td> <td><input type="text" class="text" id="qq"> </td> <td><div id="qqicon" class="icon">(請輸入正確的QQ號碼)</div></td> </tr> <tr> <td>辦公電話</td> <td><input id="offphone" type="text" class="text"></td> <td><div class="icon" id="offphoneicon"></div></td> </tr> <tr> <td>家庭電話</td> <td><input id="homephone" type="text" class="text"> </td> <td><div class="icon" id="homephoneicon"></div></td> </tr> <tr> <td>手機</td> <td ><input type="text" class="text" id="phone"></td> <td><div class="icon" id="phoneicon">(請輸入正確的手機號)</div></td> </tr> <tr> <td>密碼提示問題</td> <td> <select class="text" name="question" value=""> <option value="" selected>請選擇密碼提示問題</option> <option value="">你熱愛編程嗎？</option> <option value="">你的中學名字是？</option> <option value="">最開心的事是什么？</option> </select> </td> <td></td> </tr> <tr> <td>密碼問題答案</td> <td><input id="answer" type="text" class="text"></td> <td><div class="icon" id="answericon"></div></td> </tr> <tr> <td></td> <td class="lasttext"><input type="radio">我已看過并接受《<a href="">用戶協議</a>》</td> <td></td> </tr> <tr> <td></td> <td><input type="image" src="image/login.png" id="login"></td> <td></td> </tr> </table> </form> </div> </body> </html>
css部分>>
body{
background:url("../image/10.png") repeat-x;
}
#section{
width:1002px;
height:612px;
margin:15px auto;
position:relative;
}
#table{
width:600px;
height:550px;
background-color:#fff;
position:absolute;
font-size:18px;
line-height:5px;
border-radius: 5px;
box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
}
#table .pwstrength{
float:left;
height:30px;
width:60px;
line-height:30px;
text-align:center;
border-radius:4px;
color:#000;
}
#table .text{
width:215px;
height:32px;
}
#password{
width:215px;
height:32px;
}
#table .lasttext{
font-size:14px;
}
#table tr td{
width:180px;
}
#table .icon{
width:175px;
height:24px;
float:left;
background:no-repeat;
font-size:12px;
color:#000;
text-align:right;
line-height:24px;
}javascript部分，這邊使用的是dom2級操作，先封裝好事件對象，在IE和非IE的情況下進行操作
//封裝一下兼容性函數
var EV ={
//綁定事件兼容
addEvent:function(node,ename,fn){
if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){ //在ie下添加綁定事件
node.attachEvent("on"+ename,fn);
}else{
node.addEventListener(ename,fn,false);
}
},
removeEvent:function(node,ename,fn){
if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){ //在ie下添加綁定事件
node.detachEvent("on"+ename,fn);
}else{
node.removeEventListener(ename,fn,false);
}
}
}
window.onload=function(){
//email地址檢測 html事件處理
var eMail = document.getElementById("email");
EV.addEvent(eMail,"blur",checkEmail);
function checkEmail(){
var email = document.getElementById("email").value;
var emailicon = document.getElementById("emailicon");
var epatt = new RegExp("\\w+@[a-zA-Z0-9]+\\.[a-zA-Z0-9]{2,14}");
//利用正則表達式
if(epatt.test(email)){
emailicon.style.backgroundImage="url('image/tick.png')";
emailicon.innerHTML="";
}
else{
emailicon.style.backgroundImage="url('image/cross.png')";
emailicon.innerHTML="請輸入正確的郵箱地址!";
emailicon.style.color="#dd0000";
}
}
//密碼強度檢測
var pwd =document.getElementById("password");
EV.addEvent(pwd,"blur",checkCode);
function checkCode(){
var pwdv =document.getElementById("password").value;
var low =document.getElementById("low");
var middle =document.getElementById("middle");
var strong =document.getElementById("strong");
var pwssicon =document.getElementById("phoneicon");
var pwdpatt1 = /\d+/g; //數字
var pwdpatt2 = /[a-zA-Z]+/g; //字母
var pwdpatt3 = /(\W)+/g; //特殊字符
var booldata1,booldata2,booldata3;
if(pwdv.length<6){
pwicon.style.backgroundImage="url('image/cross.png')";
pwicon.innerHTML="密碼不得少于6位數!";
pwicon.style.color="#dd0000";
}
if(pwdv==""){
pwicon.style.backgroundImage="url('image/cross.png')";
pwicon.innerHTML="密碼項不能為空!";
pwicon.style.color="#dd0000";
}
if(pwdpatt1.test(pwdv)){
booldata1 = true;
}
if(pwdpatt2.test(pwdv)){
booldata2 = true;
}
if(pwdpatt3.test(pwdv)){
booldata3 = true;
}
if(booldata1||booldata2||booldata3){
low.style.backgroundColor="#CB4042";
pwicon.style.backgroundImage="url('image/tick.png')";
pwicon.innerHTML="";
} //強度低
if((booldata1&&booldata2)||(booldata1&&booldata3)||(booldata3&&booldata2)){
middle.style.backgroundColor="#F7C242";
pwicon.style.backgroundImage="url('image/tick.png')";
pwicon.innerHTML=""; //強度中
}
if(booldata1&&booldata2&&booldata3){
strong.style.backgroundColor="#227D51";
pwicon.style.backgroundImage="url('image/tick.png')";
pwicon.innerHTML=""; //強度強
}
}
//檢測QQ號碼
var qq =document.getElementById("qq");
EV.addEvent(qq,"blur",checkQQ);
function checkQQ(){
var qqicon =document.getElementById("qqicon");
var qqtext =document.getElementById("qq").value;
var qqpatt = /^[1-9](\d{5,10})$/;
if(qqpatt.test(qqtext)){
qqicon.style.backgroundImage="url('image/tick.png')";
qqicon.innerHTML="";
}
else{
qqicon.style.backgroundImage="url('image/cross.png')";
qqicon.innerHTML="請輸入5至11位數的QQ號碼";
qqicon.style.color="#dd0000";
}
}
//檢測手機號
var phone = document.getElementById("phone");
EV.addEvent(phone,"blur",checkPhone);
function checkPhone(){
var phoneicon =document.getElementById("phoneicon");
var phonenum = document.getElementById("phone").value;
var phonepatt = /^0?(13|15|14|18)[0-9]{9}$/;
if(phonepatt.test(phonenum)){
phoneicon.style.backgroundImage="url('image/tick.png')";
phoneicon.innerHTML="";
}
else{
phoneicon.style.backgroundImage="url('image/cross.png')";
phoneicon.innerHTML="請輸入正確的手機號!";
phoneicon.style.color="#dd0000";
}
}
//檢測用戶名
var username = document.getElementById("username");
EV.addEvent(username,"blur",checkUser);
function checkUser(){
var usercon = document.getElementById("username").value;
var usernameicon =document.getElementById("usernameicon");
var unpatt = /[A-Za-z0-9_\-\u4e00-\u9fa5]{6,18}/;
if(unpatt.test(usercon)){
usernameicon.style.backgroundImage="url('image/tick.png')";
usernameicon.innerHTML="";
}
else{
usernameicon.style.backgroundImage="url('image/cross.png')";
usernameicon.innerHTML="用戶名至少大于6個字符!";
usernameicon.style.color="#dd0000";
if(usercon==""){
usernameicon.style.backgroundImage="url('image/cross.png')";
usernameicon.innerHTML="用戶名不能為空!";
usernameicon.style.color="#dd0000";
}
}
//確認密碼
var Cfpw =document.getElementById("cfpw");
EV.addEvent(Cfpw,"blur",cfPw);
function cfPw(){
var cfpw =document.getElementById("cfpw").value;
var cfpwicon=document.getElementById("cfpwicon");
var pwd =document.getElementById("password").value;
if(cfpw==pwd&&cfpw!=""){
cfpwicon.style.backgroundImage="url('image/tick.png')";
cfpwicon.innerHTML="";
}else{
cfpwicon.style.backgroundImage="url('image/cross.png')";
cfpwicon.innerHTML="輸入的密碼不一致!";
cfpwicon.style.color="#dd0000";
}
}
//MSN
var Msn = document.getElementById("msn");
EV.addEvent(Msn,"blur",checkMsn);
function checkMsn(){
var msn =document.getElementById("msn").value;
var msnicon =document.getElementById("msnicon");
var msnpatt = /\w+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,14}/;
if(msnpatt.test(msn)){
msnicon.style.backgroundImage="url('image/tick.png')";
msnicon.innerHTML="";
}else{
msnicon.style.backgroundImage="url('image/cross.png')";
msnicon.innerHTML="msn應為正確郵箱地址!";
msnicon.style.color="#dd0000";
}
}
//辦公電話
var officephone =document.getElementById("offphone");
EV.addEvent(officephone,"blur",checkoffPhone);
function checkoffPhone(){
var offphone = document.getElementById("offphone").value;
var offphoneicon =document.getElementById("offphoneicon");
var offpatt = /(\(\d{3,4}\)|\d{3,4}-)?\d{8}/;
if(offpatt.test(offphone)){
offphoneicon.style.backgroundImage="url('image/tick.png')";
offphonecon.innerHTML="";
}else{
offphoneicon.style.backgroundImage="url('image/cross.png')";
offphoneicon.innerHTML="例:010-88888888";
offphoneicon.style.color="#dd0000";
}
}
//家庭電話
var Homephone =document.getElementById("homephone");
EV.addEvent(Homephone,"blur",checkHomephone);
function checkHomephone(){
var homephone =document.getElementById("homephone").value;
var homephoneicon =document.getElementById("homephoneicon");
var homepatt = /(\(\d{3,4}\)|\d{3,4}-)?\d{8}/;
if(homepatt.test(homephone)){
homephoneicon.style.backgroundImage="url('image/tick.png')";
homephonecon.innerHTML="";
}else{
homephoneicon.style.backgroundImage="url('image/cross.png')";
homephoneicon.innerHTML="例:010-88888888";
homephoneicon.style.color="#dd0000";
}
}
//問題答案
function checkAnswer(){
var answer =document.getElementById("answer").value;
var answericon =document.getElementById("answericon");
if(answer!=""){
answericon.style.backgroundImage="url('image/tick.png')";
answercon.innerHTML="";
}else{
answericon.style.backgroundImage="url('image/cross.png')";
answericon.innerHTML="密碼問題答案不能為空!";
answericon.style.color="#dd0000";
}
}
//登錄注冊
var login =document.getElementById("login");
EV.addEvent(login,"click",Login);
function Login(){
var form =document.getElementById("form");
if(username.value==""){
alert("用戶名不能為空!");
this.value.focus();
return false;
}
if(password.value==""){
alert("密碼不能為空!");
this.value.focus();
return false;
}
if(email.value==""){
alert("email不能為空!");
this.value.focus();
return false;
}
else{
var info =confirm("信息填寫完整，確定注冊嗎?");
if(info==true){
window.open("http://www.eduasksz.com","_blank");
}
}
}
}
}以上是“javascript中表單正則應用的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
