js/jq 正则验证表单

刚开始学做个笔记

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js/jq 正则</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> 姓名: <input type="text" placeholder="请使用真实姓名注册" class="form-control" id="name" onblur="IsChinese();"/> <span class="col-sm-5 nameTip"></span> 手机 : <input type="text" placeholder="请键入手机号"class="form-control" id="mobile" onblur="checkMobile();"/> <span class="col-sm-5 mobileTip"></span> <script type="text/javascript"> function IsChinese() { var sName = document.getElementById('name').value; if (!(/\S/.test(sName)) || !isNaN(sName)) { $('#name').val(''); $('.nameTip').html('✘请输入正确姓名').css({'color':'red','fontSize':'14px'}); $('#name').focus(); return false; }else{ $('.nameTip').html('✔').css({'color':'#68b828','fontSize':'24px'}); return true; } }; function checkMobile() { var sMobile = document.getElementById('mobile').value if (!(/^1[3|4|5|8][0-9]\d{8,8}$/.test(sMobile))) { $('#mobile').val(''); $('.mobileTip').html('✘请输入正确手机号').css({'color':'red','fontSize':'14px'}); $('#mobile').focus(); return false; }else{ $('.mobileTip').html('✔').css({'color':'#68b828','fontSize':'24px'}); return true; } }; function checkPassword() { var sPassword = document.getElementById('password').value if (!(/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/.test(sPassword))) { $('#password').val(''); $('.passwordTip').html('✘请输入6到22位的密码').css({'color':'red','fontSize':'14px'}); password.focus(); return false; }else{ $('.passwordTip').html('✔').css({'color':'#68b828','fontSize':'24px'}); return true; } }; </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » js/jq 正则验证表单