常用javascript表單驗證匯總
更新時間：2020年07月20日 14:14:07 投稿：lijiao
這篇文章主要介紹了一些常用javascript表單驗證，文章最后還附帶了一個實踐案例，以驗證數(shù)字為例進(jìn)行講解，感興趣的小伙伴們可以參考一下
實例講解：驗證輸入的是否是數(shù)字，是否滿足數(shù)字位數(shù)，如果錯誤，并進(jìn)行友情提醒。
效果圖：
<!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()">點(diǎn)擊這里</button>
</body>
</html>
上面這個實例包含了許多常用的表單驗證的代碼，下面分享給大家：
1、驗證表單
2、驗證昵稱
3、計算昵稱長度
4、驗證昵稱是否存在
5、驗證手機(jī)號
6、驗證密碼
7、驗證郵箱
8、驗證驗證碼
9、判斷是否選中
注冊驗證為例：
<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,"");//去除文章中間空格
}
以上就是實用的javascript表單驗證，希望大家喜歡。
相關(guān)文章
這篇文章主要介紹了JavaScript 函數(shù)柯里化的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
給事件響應(yīng)函數(shù)傳參數(shù)的四種方式小結(jié)
這篇文章主要介紹了給事件響應(yīng)函數(shù)傳參數(shù)的四種方式。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
有個朋友在weibo上問我可不可以用JS和CSS讓頁面每次刷新隨機(jī)產(chǎn)生一張背景圖，當(dāng)然是可以的。具體的方法看下面的實現(xiàn)代碼吧2014-03-03
JavaScript 函數(shù)惰性載入的實現(xiàn)及其優(yōu)點(diǎn)介紹
惰性載入表示函數(shù)執(zhí)行的分支只會在函數(shù)第一次掉用的時候執(zhí)行，在第一次調(diào)用過程中，該函數(shù)會被覆蓋為另一個按照合適方式執(zhí)行的函數(shù)，這樣任何對原函數(shù)的調(diào)用就不用再經(jīng)過執(zhí)行的分支了2013-08-08
這篇文章主要介紹了JavaScript中setter和getter方法介紹的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
js遍歷添加欄目類添加css 再點(diǎn)擊其它刪除css【推薦】
這篇文章主要介紹了js遍歷添加欄目類添加css 再點(diǎn)擊其它刪除css的實例代碼,非常不錯，具有一定的參考借鑒借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要為大家介紹了GoJs分組繪圖模板go.Group使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了如何利用微信小程序制作一個打卡時鐘，分為工作和休息兩種狀態(tài)，用戶可以設(shè)置相應(yīng)的時間，所有的時鐘記錄都會被保存下來，感興趣的可以了解一下2022-04-04
JS自調(diào)用匿名函數(shù)具體實現(xiàn)
定義一個函數(shù)用做臨時的命名空間，在這個命名空間內(nèi)定義的變量都不會污染到全局命名空間,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了JavaScript 實現(xiàn)繼承的幾種方式，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02