當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery 表单校验

發布時間：2023/12/3 编程问答 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery 表单校验小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

表單校驗的作用

為什么要進行表單驗證：保證數據符合要求
為什么要進行JavaScript或者jQuery表單驗證：
1.降低服務器端負擔
2.還可以進行服務器驗證（JSP）

正則表達式

為什么使用正則表達式：

簡潔的代碼嚴謹的驗證文本框中的內容

正則表達式舉例：
匹配國內電話號碼：

\d{3}-\d{8}|\d{4}-\d{7}

匹配騰訊QQ號：

[1-9][0-9]{4,}

匹配中國郵政編碼：

\d{6}

匹配身份證：

\d{15}|\d{18}

匹配由數字和26個英文字母組成的字符串

^[A-Za-z0-9]+$

匹配Email地址：

\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*

匹配中文字符的正則表達式：

[\u4e00-\u9fa5]

什么是正則表達式：

Regular Expression，在代碼中常簡寫為regex 正則表達式使用單個字符串來描述、匹配一系列符合某個句法規則的字符串。
在很多文本編輯器里，正則表達式通常被用來檢索、替換那些符合某個模式的文本。如何創建正則表達式
var reg=/china/;
var reg=new RegExp(" china ");

表單校驗代碼實現

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/***********驗證碼的產生******/function yzm(){//產生一個4位隨機數var ran= Math.floor(Math.random()*9000+1000);$("#yzm2").html(ran);}$(function(){/******用戶名的校驗******/ $("#uname").blur(function(){var reg =/^[\u4e00-\u9fa5]{2,4}$/;check("uname",reg);})/*********密碼的校驗******/$("#pwd").blur(function(){var reg=/^\d{4,6}$/;check("pwd",reg);})/*********手機號校驗*******/$("#phone").blur(function(){var reg=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;check("phone",reg);})/*********郵箱校驗*********/$("#email").blur(function(){var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;check("email",reg);})/********抽取公共的方******/function check(id,reg){//獲得對象var uname=$("#"+id);//獲得對象的值var val=uname.val();//獲得span對象var span =$("#span_"+id);if(val==""||val==null){span.html("× "+uname.attr("alt")+"不能為空").css("color","red").addClass("error");}else if(reg.test(val)) {span.html("√ "+uname.attr("alt")+"合法").css("color","green").removeClass();}else {span.html("× "+uname.attr("alt")+"不合法").css("color","red").addClass("error");}}/************愛好的校驗******/ $("input[name='fav']").click(function(){var inp=$("input[name='fav']:checked");var span=$("#span_fav");if(inp.length>0){span.html("√ 愛好選擇成功").css("color","green").removeClass();}else {span.html("× 請選擇愛好").css("color","red").addClass("error");}})/******籍貫的校驗****/ $("#sel").change(function(){var val=$("#sel").val();var span=$("#span_sel");if(val=="0"){span.html("請選擇籍貫").css("color","red").addClass("error");}else {span.html("籍貫選擇成功").css("color","green").removeClass();}})/***********是否同意協議******/$("#check").click(function(){var flag= $("#check").prop("checked");/*if(flag){$("#sub").prop("disabled",false);}else{$("#sub").prop("disabled",true);}*/$("#sub").prop("disabled",!flag);})/*******最終的提交的操作*****/$("form").submit(function(){ $("#uname").trigger("blur");$("#pwd").trigger("blur");$("#email").trigger("blur");$("#phone").trigger("blur");$("input[name='fav']").trigger("click");$("input[name='fav']").trigger("click");//獲得錯誤的對象var er= $(".error");if(er.length>0){return false;}else {return true;} })})/** 正則表達式：* 作用：對于數據格式進行校驗* * ^:開始* $:結束* [0-9]所有得數字* [a-z A-Z] 所有的字母* {5} ：段域只可以是5位* {2，5} 最少2位最多5位* * \d：--[0-9]* \w:--[0-9 a-z A-Z]和下劃線* * 正則表達式網址： https://www.jb51.net/article/76901.htm* * */</script> </head><body onload="yzm()"><center><h3>注冊頁面</h3><hr /> <form action="" method="get" ><table><tr height="35px"><td width="150px">用戶名：</td><td width="400px"><input type="text" name="uname" id="uname" value="張三三" alt="用戶名" /><span id="span_uname"></span></td></tr><tr height="35px"><td>密碼：</td><td><input type="password" name="pwd" id="pwd" value="123456" alt="密碼"/><span id="span_pwd"></span></td></tr><tr height="35px"><td>手機號：</td><td><input type="text" name="phone" id="phone" value="18231932733" alt="手機號" /><span id="span_phone"></span></td></tr><tr height="35px"><td>郵箱：</td><td><input type="text" name="mail" id="email" value="2767501426@qq.com" alt="郵箱" /><span id="span_email"></span></td></tr><tr height="35px"><td>性別：</td><td>男：<input type="radio" name="sex" value="1" />女：<input type="radio" name="sex" value="0"/></td></tr><tr height="35px"><td>愛好：</td><td><input type="checkbox" name="fav" value="1" />唱歌<input type="checkbox" name="fav" value="2" />睡覺<input type="checkbox" name="fav" value="3" />LOL<br /><input type="checkbox" name="fav" value="4" />旅游<input type="checkbox" name="fav" value="5" />高爾夫<input type="checkbox" name="fav" value="6" />籃球<span id="span_fav"></span></td></tr><tr height="35px"><td>籍貫：</td><td><select name="adress" id="sel"><option value="0">--請選擇--</option><option value="1">河南</option><option value="2">湖南</option><option value="3">海南</option><option value="4">云南</option></select><span id="span_sel"></span></td></tr> <tr height="35px"><td>驗證碼：</td><td><input type="text" style="width: 100px; height: 60px;" id="yzm1" /><span id="yzm2" onclick="yzm()"></span><span id="yzm3"></span></td></tr> <tr height="35px"><td>個人介紹：</td><td><textarea name="intro" rows="8" cols="30"></textarea></td></tr><tr height="35px"><td colspan="2" align="center"><input type="checkbox" name="" id="check" value="" >是否同一本公司協議</td></tr><tr height="35px"><td colspan="2" align="center"><input type="submit" id="sub" value="注冊" disabled="true"/></td></tr></table></form></center> </body> </html>

總結

以上是生活随笔為你收集整理的JQuery 表单校验的全部內容，希望文章能夠幫你解決所遇到的問題。

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