jquery表單提交前實現同步驗證

.int{ height: 30px; text-align: left; width: 600px; }

label{ width: 200px; margin-left: 20px; }

.high{ color: red; }

.msg{ font-size: 13px; }

.onError{ color: red; }

.onSuccess{ color: green; }

姓名：

郵箱：

住址：

//為表單的必填文本框添加提示信息(選擇form中的所有后代input元素)

$("form :input.required").each(function () {

//通過jquery api：$("HTML字符串") 創建jquery對象

var $required = $("*");

//添加到this對象的父級對象下

$(this).parent().append($required);

});

//為表單元素添加失去焦點事件

$("form :input").blur(function(){

var $parent = $(this).parent();

$parent.find(".msg").remove(); //刪除以前的提醒元素(find()：查找匹配元素集中元素的所有匹配元素)

//驗證姓名

if($(this).is("#name")){

var nameVal = $.trim(this.value); //原生js去空格方式：this.replace(/(^\s*)|(\s*$)/g, "")

var regName = /[~#^$@%&!*()<>:;'"{}【】 ?]/;

if(nameVal == "" || nameVal.length < 6 || regName.test(nameVal)){

var errorMsg = " 姓名非空，長度6位以上，不包含特殊字符！";

//class='msg onError' 中間的空格是層疊樣式的格式

$parent.append("" + errorMsg + "");

}

else{

var okMsg=" 輸入正確";

$parent.find(".high").remove();

$parent.append("" + okMsg + "");

}

}

//驗證郵箱

if($(this).is("#email")){

var emailVal = $.trim(this.value);

var regEmail = /.+@.+\.[a-zA-Z]{2,4}$/;

if(emailVal== "" || (emailVal != "" && !regEmail.test(emailVal))){

var errorMsg = " 請輸入正確的E-Mail住址！";

$parent.append("" + errorMsg + "");

}

else{

var okMsg=" 輸入正確";

$parent.find(".high").remove();

$parent.append("" + okMsg + "");

}

}

}).keyup(function(){

//triggerHandler 防止事件執行完后，瀏覽器自動為標簽獲得焦點

$(this).triggerHandler("blur");

}).focus(function(){

$(this).triggerHandler("blur");

});

//點擊重置按鈕時，通過trigger()來觸發文本框的失去焦點事件

$("#send").click(function(){

//trigger 事件執行完后，瀏覽器會為submit按鈕獲得焦點

$("form .required:input").trigger("blur");

var numError = $("form .onError").length;

if(numError){

return false;

}

alert("注冊成功！");

});

總結

以上是生活随笔為你收集整理的html表单提交前验证,jquery表单提交前实现同步验证（附代码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。