JS表單驗證的代碼(常用)
來源:易賢網(wǎng) 閱讀:1014 次 日期:2016-07-08 14:12:54
溫馨提示:易賢網(wǎng)小編為您整理了“JS表單驗證的代碼(常用)”,方便廣大網(wǎng)友查閱!

最近沒有項目做,有點空余時間,小編把日常比較常用的js表單驗證代碼整理分享到腳本之家平臺,供大家學(xué)習(xí),需要的朋友參考下吧!

注冊驗證:

<script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

//驗證表單

function vailForm(){

var form = jQuery("#editForm");

if(!vailNickName())return;

if(!vailPhone())return;

if(!vailPwd())return;

if(!vailConfirmPwd())return;

if(!vailEmail())return;

if(!vailCode())return;

if(!vailAgree())return;

form.submit();

}

//驗證昵稱

function vailNickName(){

var nickName = jQuery("#nickName").val();

var flag = false;

var message = "";

var patrn=/^\d+$/;

var length = getNickNameLength();

if(nickName == ''){

message = "昵稱不能為空!";

}else if(length<4||length>16){

message = "昵稱為4-16個字符!";

} else if(checkNickNameIsExist()){

message = "該昵稱已經(jīng)存在,請重新輸入!";

}else{

flag = true;

}

if(!flag){

jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-error");

jQuery("#nickNameP").html("");

jQuery("#nickNameP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);

//jQuery("#nickName").focus();

}else{

jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success");

jQuery("#nickNameP").html("");

jQuery("#nickNameP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該昵稱可用");

}

return flag;

}

//計算昵稱長度

function getNickNameLength(){

var nickName = jQuery("#nickName").val();

var len = 0;

for (var i = 0; i < nickName.length; i++) {

var a = nickName.charAt(i);

      //函數(shù)格式:stringObj.match(rgExp) stringObj為字符串必選 rgExp為正則表達(dá)式必選項

      //返回值:如果能匹配則返回結(jié)果數(shù)組,如果不能匹配返回null

if (a.match(/[^\x00-\xff]/ig) != null){

len += 2;

}else{

len += 1;

}

}

return len;

}

//驗證昵稱是否存在

function checkNickNameIsExist(){

var nickName = jQuery("#nickName").val();

var flag = false;

jQuery.ajax(

{ url: "checkNickName?t=" + (new Date()).getTime(),

data:{nickName:nickName},

dataType:"json",

type:"GET",

async:false,

success:function(data) {

var status = data.status;

if(status == "1"){

flag = true;

}

}

});

return flag;

}

//驗證手機(jī)號

function vailPhone(){

var phone = jQuery("#phone").val();

var flag = false;

var message = "";

//var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/;

var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-3]{1})|(18[5-9]{1}))+\d{8})$/;

if(phone == ''){

message = "手機(jī)號碼不能為空!";

}else if(phone.length !=11){

message = "請輸入有效的手機(jī)號碼!";

}else if(!myreg.test(phone)){

message = "請輸入有效的手機(jī)號碼!";

}else if(checkPhoneIsExist()){

message = "該手機(jī)號碼已經(jīng)被綁定!";

}else{

flag = true;

}

if(!flag){

jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-error");

jQuery("#phoneP").html("");

jQuery("#phoneP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);

//jQuery("#phone").focus();

}else{

jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success");

jQuery("#phoneP").html("");

jQuery("#phoneP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該手機(jī)號碼可用");

}

return flag;

}

//驗證手機(jī)號是否存在

function checkPhoneIsExist(){

var phone = jQuery("#phone").val();

var flag = true;

jQuery.ajax(

{ url: "checkPhone?t=" + (new Date()).getTime(),

data:{phone:phone},

dataType:"json",

type:"GET",

async:false,

success:function(data) {

var status = data.status;

if(status == "0"){

flag = false;

}

}

});

return flag;

}

//驗證密碼

function vailPwd(){

var password = jQuery("#password").val();

var flag = false;

var message = "";

var patrn=/^\d+$/;

if(password ==''){

message = "密碼不能為空!";

}else if(password.length<6 || password.length>16){

message = "密碼6-16位!";

}else if(patrn.test(password)){

message = "密碼不能全是數(shù)字!";

}else{

flag = true;

}

if(!flag){

jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-error");

jQuery("#passwordP").html("");

jQuery("#passwordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);

//jQuery("#password").focus();

}else{

jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success");

jQuery("#passwordP").html("");

jQuery("#passwordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該密碼可用");

}

return flag;

}

//驗證確認(rèn)密碼

function vailConfirmPwd(){

var confirmPassword = jQuery("#confirm_password").val();

var patrn=/^\d+$/;

var password = jQuery("#password").val();

var flag = false;

var message = "";

if(confirmPassword == ''){

message = "請輸入確認(rèn)密碼!";

}else if(confirmPassword != password){

message = "二次密碼輸入不一致,請重新輸入!";

}else if(patrn.test(password)){

message = "密碼不能全是數(shù)字!";

}else {

flag = true;

}

if(!flag){

jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-error");

jQuery("#confirmPasswordP").html("");

jQuery("#confirmPasswordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);

//jQuery("#confirm_password").focus();

}else{

jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success");

jQuery("#confirmPasswordP").html("");

jQuery("#confirmPasswordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>密碼正確");

}

return flag;

}

//驗證郵箱

function vailEmail(){

var email = jQuery("#email").val();

var flag = false;

var message = "";

var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 

if(email ==''){

message = "郵箱不能為空!";

}else if(!myreg.test(email)){

message = "請輸入有效的郵箱地址!";

}else if(checkEmailIsExist()){

message = "該郵箱地址已經(jīng)被注冊!";

}else{

flag = true;

}

if(!flag){

jQuery("#emailDiv").removeClass().addClass("ui-form-item has-error");

jQuery("#emailP").html("");

jQuery("#emailP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);

//jQuery("#email").focus();

}else{

jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success");

jQuery("#emailP").html("");

jQuery("#emailP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該郵箱可用");

}

return flag;

}

//驗證郵箱是否存在

function checkEmailIsExist(){

var email = jQuery("#email").val();

var flag = false;

jQuery.ajax(

{ url: "checkEmail?t=" + (new Date()).getTime(),

data:{email:email},

dataType:"json",

type:"GET",

async:false,

success:function(data) {

var status = data.status;

if(status == "1"){

flag = true;

}

}

});

return flag;

}

//驗證驗證碼

function vailCode(){

var randCode = jQuery("#randCode").val();

var flag = false;

var message = "";

if(randCode == ''){

message = "請輸入驗證碼!";

}else if(!checkCode()){

message = "驗證碼不正確!";

}else{

flag = true;

}

if(!flag){

jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-error");

jQuery("#randCodeP").html("");

jQuery("#randCodeP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);

//jQuery("#randCode").focus();

}else{

jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-success");

jQuery("#randCodeP").html("");

jQuery("#randCodeP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>");

}

return flag;

}

//檢查隨機(jī)驗證碼是否正確

function checkCode(){

var randCode = jQuery("#randCode").val();

var flag = false;

jQuery.ajax(

{ url: "checkRandCode?t=" + (new Date()).getTime(),

data:{randCode:randCode},

dataType:"json",

type:"GET",

async:false,

success:function(data) {

var status = data.status;

if(status == "1"){

flag = true;

}

}

});

return flag;

}

//判斷是否選中

function vailAgree(){

if(jQuery("#agree").is(":checked")){

return true;

}else{

alert("請確認(rèn)是否閱讀并同意XX協(xié)議");

}

return false;

}

function delHtmlTag(str){ var str=str.replace(/<\/?[^>]*>/gim,"");//去掉所有的html標(biāo)記 var result=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前后空格 return result.replace(/\s/g,"");//去除文章中間空格}<!DOCTYPE html><html><body><h1>我的第一段 JavaScript</h1><p>請輸入數(shù)字。如果輸入值不是數(shù)字,瀏覽器會彈出提示框。</p><input id="demo" type="text"><script>function myFunction(){var x=document.getElementById("demo").value;if(x==""){ alert("輸入不能為空"); return;}if(isNaN(x)){ alert("請輸入數(shù)字"); return;}if(x.length!=6){ alert("請輸入6位數(shù)字"); return;}}</script><button type="button" onclick="myFunction()">點擊這里</button></body></html> 

//驗證密碼為數(shù)字字母下劃線

function CheckPwd(pwd) {

var validStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_~/!@#$%^&*();-+.=,";

for (i = 0; i < pwd.length; i++) {

if (validStr.indexOf(pwd.charAt(i)) == -1) {

return false;

}

}

return true;

}

//驗證郵箱格式

function checkemail(email) {

var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

if (!filter.test(email)) {

return false;

}

return true;

}

function isEmail(val) {

return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_\`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/.test(val);

}

///手機(jī)號碼驗證

function checktelephone(cellPhone) {

var RegCellPhone = /^([0-9]{11})?$/;

falg = cellPhone.search(RegCellPhone);

if (falg == -1) {

return false;

} else {

return true;

}

}

//獲取URL參數(shù)值

function getParameter(param) {

var query = window.location.search;

var iLen = param.length;

var iStart = query.indexOf(param);

if (iStart == -1)

return "";

iStart += iLen + 1;

var iEnd = query.indexOf("&", iStart);

if (iEnd == -1)

return query.substring(iStart);

return query.substring(iStart, iEnd);

}

以上代碼是小編給大家介紹的js表單驗證,代碼簡單易懂,非常實用,希望對大家有所幫助

更多信息請查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:JS表單驗證的代碼(常用)
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機(jī)號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機(jī)站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)