jQuery formValidator表單驗證_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery formValidator表單驗證_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

作为一名程序员，在解决工作中遇到问题之后，做一些总结是有必要的，既方便总结温习相关知识点，也为广大的程序员提供了一些工作经历，给予同行一面明鉴.

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formValidator</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/formValidator-4.0.1.min.js"></script>
<script src="js/DateTimeMask.js"></script>
<script src="js/formValidatorRegex.js"></script>
<link rel="stylesheet" href="css/validator.css">
<style>
form{
width: 500px;
margin: 100px auto;
}
table tr td:first-child{
text-align: right;
}
table tr td{
padding: 5px 0;
}
div{
margin-left: 10px;
padding: 0 10px;
}
</style>
</head>
<body>
<form name="myfm" id="myfm" action="1.html">
<table>
<tbody>
<tr>
<td><label for="uname">用户名：</label></td>
<td><input type="text" id="uname" name="uname"/></td>
<td><div id="unameTip"></div></td>
</tr>
<tr>
<td><label for="pwd">密码：</label></td>
<td><input type="password" id="pwd" name="pwd"/></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td><label for="repwd">重复密码：</label></td>
<td><input type="password" name="repwd" id="repwd"/></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td><label>性别：</label></td>
<td>
<input type="radio" name="sex" value="male" id="male"/>
<label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"/>
<label for="female">女</label>
</td>
</tr>
<tr>
<td><label for="area">地区：</label></td>
<td>
<select name="area" id="area">
<option value="0">- 请选择 -</option>
<option value="1">锦江区</option>
<option value="2">金牛区</option>
<option value="3">龙泉驿区</option>
<option value="4">青羊区</option>
</select>
</td>
</tr>
<tr>
<td><label for="num">身份证：</label></td>
<td><input type="text" id="num" name="num"/></td>
<td><div id="numTip"></div></td>
</tr>
<tr>
<td><label for="phone">电话号码：</label></td>
<td><input type="text" name="phone" id="phone"/></td>
<td><div id="phoneTip"></div></td>
</tr>
<tr>
<td><label for="email">邮箱：</label></td>
<td><input type="text" name="email" id="email"/></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="提交"/></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script>
$.formValidator.initConfig({ //用于配置当前formValidator插件
formID:"myfm",
debug:false,
submitOnce:true,
validatorGroup : '1', //设置验证组，默认值为1
onSuccess : function(){ //验证成功后的回调函数
}, 
onError:function(){ //验证失败后的回调函数
} 
});
$('#uname').formValidator({
ValidatorGroup : '1', //验证组为1 
onEmpty : '用户名不能为空', //提示用户名不能为空
onShow : "", 
onFocus : '用户名必须为1到12位的数字或字母',//表单元素获得焦点的时候提示应输入的格式
onCorrect : '用户名输入正确' //输入正确的提示
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{1,12}$', //验证表单输入的正则表达式
onError : '用户名格式有误，请从新输入' //输入错误的提示
})
.ajaxValidator({ //验证输入的用户名是否已经存在
dataType : 'html', //请求数据的格式
async : true, //异步方式
url : 'test.php',
success : function(data){
if (data=='false') {
return false;
}else{
return true;
}
},
onError : '该用户名已存在，请从新输入',
onWait : '正在对用户名进行合法性校验，请稍候...'
});
$('#pwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不能为空',
onShow : "",
onFocus : '密码必须为6位以上的字母或数字',
onCorrect : '密码输入正确'
})
.regexValidator({
regExp : '[0-9a-zA-Z]{6,}',
onError : '密码格式有误，请从新输入'
});
$('#repwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不能为空',
onShow : "",
onFocus : '密码必须为6位以上的字母或数字',
onCorrect : '密码输入正确'
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{6,}$',
onError : '密码格式不正确'
})
.compareValidator({ //比较两次输入内容是否符合下面给出的比较符号
desID : 'pwd', //相比较的表单元素的ID值
operateor : '=', //要比较的两个元素之间的关系
onError : '两次密码输入不一致，请从新输入' //不满足以上关系的时候的提示
});
$('#num').formValidator({
ValidatorGroup : '1',
onEmpty : '身份证不能为空',
onShow : '',
onFocus : '请输入您的身份证号',
onCorrect : '身份证格式正确'
}).regexValidator({
regExp : '^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{4}$',
//15位身份证号码的正则表达式/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
onError : '身份证格式有误，请从新输入'
});
$('#phone').formValidator({
ValidatorGroup : '1',
onEmpty : '手机号码不能为空',
onShow : '',
onFocus : '请输入您的手机号码',
onCorrect : '手机号码格式正确',
})
.regexValidator({
regExp : '^(0|86|17951)&#63;(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$',
onError : '手机号码格式有误，请从新输入'
});
$('#email').formValidator({
ValidatorGroup : '1',
onEmpty : '邮箱地址不能为空',
onShow : '',
onFocus : '请输入您的邮箱地址',
onCorrect : '邮箱格式正确'
})
.regexValidator({
regExp : '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$',
onError : '邮箱格式有误，请从新输入'
});
</script>
</body>
</html>
php部分代码：
<&#63;php
header('Content-Type:html');
$name=array('Tom','ervin','Jhon');
$uname=$_REQUEST['uname'];
$notexit='true';
for ($i=0; $i <3 ; $i++) { 
if ($uname==$name[$i]) {
$notexit='false';
break;
}else{
}
}
echo "$notexit";
&#63;>

登入後複製

以上内容是小编给大家介绍的jQuery formValidator表单验证相关知识，希望对大家有所帮助，同时感谢大家对脚本之家网站的支持。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7519

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何創建和發布自己的JavaScript庫？ Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？ Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？ Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何使用源地圖調試縮小JavaScript代碼？ Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。

console.log輸出結果差異：兩次調用為何不同？ Apr 04, 2025 pm 05:12 PM

深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...

初學者的打字稿，第2部分：基本數據類型 Mar 19, 2025 am 09:10 AM

掌握了入門級TypeScript教程後，您應該能夠在支持TypeScript的IDE中編寫自己的代碼，並將其編譯成JavaScript。本教程將深入探討TypeScript中各種數據類型。 JavaScript擁有七種數據類型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。 TypeScript在此基礎上定義了更多類型，本教程將詳細介紹所有這些類型。 Null數據類型與JavaScript一樣，TypeScript中的null

See all articles

jQuery formValidator表單驗證_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題