常用javascript表單驗(yàn)證匯總
更新時(shí)間：2020年07月20日 14:14:07 投稿：lijiao
這篇文章主要介紹了一些常用javascript表單驗(yàn)證，文章最后還附帶了一個(gè)實(shí)踐案例，以驗(yàn)證數(shù)字為例進(jìn)行講解，感興趣的小伙伴們可以參考一下
實(shí)例講解：驗(yàn)證輸入的是否是數(shù)字，是否滿足數(shù)字位數(shù)，如果錯(cuò)誤，并進(jìn)行友情提醒。
效果圖：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p>請(qǐng)輸入數(shù)字。如果輸入值不是數(shù)字，瀏覽器會(huì)彈出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""){
alert("輸入不能為空");
return;
}
if(isNaN(x)){
alert("請(qǐng)輸入數(shù)字");
return;
}
if(x.length!=6){
alert("請(qǐng)輸入6位數(shù)字");
return;
}
}
</script>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
</body>
</html>
上面這個(gè)實(shí)例包含了許多常用的表單驗(yàn)證的代碼，下面分享給大家：
1、驗(yàn)證表單
2、驗(yàn)證昵稱
3、計(jì)算昵稱長(zhǎng)度
4、驗(yàn)證昵稱是否存在
5、驗(yàn)證手機(jī)號(hào)
6、驗(yàn)證密碼
7、驗(yàn)證郵箱
8、驗(yàn)證驗(yàn)證碼
9、判斷是否選中
注冊(cè)驗(yàn)證為例：
<script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
//驗(yàn)證表單
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();
}
//驗(yàn)證昵稱
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個(gè)字符！";
} else if(checkNickNameIsExist()){
message = "該昵稱已經(jīng)存在，請(qǐ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;
}
//計(jì)算昵稱長(zhǎng)度
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á)式必選項(xiàng)
//返回值：如果能匹配則返回結(jié)果數(shù)組，如果不能匹配返回null
if (a.match(/[^\x00-\xff]/ig) != null){
len += 2;
}else{
len += 1;
}
}
return len;
}
//驗(yàn)證昵稱是否存在
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;
}
//驗(yàn)證手機(jī)號(hào)
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ī)號(hào)碼不能為空！";
}else if(phone.length !=11){
message = "請(qǐng)輸入有效的手機(jī)號(hào)碼！";
}else if(!myreg.test(phone)){
message = "請(qǐng)輸入有效的手機(jī)號(hào)碼！";
}else if(checkPhoneIsExist()){
message = "該手機(jī)號(hào)碼已經(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ī)號(hào)碼可用");
}
return flag;
}
//驗(yàn)證手機(jī)號(hào)是否存在
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;
}
//驗(yàn)證密碼
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;
}
//驗(yàn)證確認(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 = "請(qǐng)輸入確認(rèn)密碼！";
}else if(confirmPassword != password){
message = "二次密碼輸入不一致，請(qǐng)重新輸入！";
}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;
}
//驗(yàn)證郵箱
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 = "請(qǐng)輸入有效的郵箱地址！";
}else if(checkEmailIsExist()){
message = "該郵箱地址已經(jīng)被注冊(cè)！";
}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;
}
//驗(yàn)證郵箱是否存在
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;
}
//驗(yàn)證驗(yàn)證碼
function vailCode(){
var randCode = jQuery("#randCode").val();
var flag = false;
var message = "";
if(randCode == ''){
message = "請(qǐng)輸入驗(yàn)證碼！";
}else if(!checkCode()){
message = "驗(yàn)證碼不正確！";
}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ī)驗(yàn)證碼是否正確
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("請(qǐng)確認(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,"");//去除文章中間空格
}
以上就是實(shí)用的javascript表單驗(yàn)證，希望大家喜歡。
您可能感興趣的文章:
- js表單驗(yàn)證實(shí)例講解
- 擁有一個(gè)屬于自己的javascript表單驗(yàn)證插件
- javascript html5實(shí)現(xiàn)表單驗(yàn)證
- AngularJS自動(dòng)表單驗(yàn)證
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- 詳解AngularJS實(shí)現(xiàn)表單驗(yàn)證
- 快速學(xué)習(xí)jQuery插件 jquery.validate.js表單驗(yàn)證插件使用方法
- jquery validate.js表單驗(yàn)證入門實(shí)例（附源碼）
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- js實(shí)現(xiàn)表單及時(shí)驗(yàn)證功能 用戶信息立即驗(yàn)證
相關(guān)文章
這篇文章主要介紹了JavaScript 函數(shù)柯里化的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
給事件響應(yīng)函數(shù)傳參數(shù)的四種方式小結(jié)
這篇文章主要介紹了給事件響應(yīng)函數(shù)傳參數(shù)的四種方式。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
使用js操作css實(shí)現(xiàn)js改變背景圖片示例
有個(gè)朋友在weibo上問(wèn)我可不可以用JS和CSS讓頁(yè)面每次刷新隨機(jī)產(chǎn)生一張背景圖，當(dāng)然是可以的。具體的方法看下面的實(shí)現(xiàn)代碼吧2014-03-03
JavaScript 函數(shù)惰性載入的實(shí)現(xiàn)及其優(yōu)點(diǎn)介紹
惰性載入表示函數(shù)執(zhí)行的分支只會(huì)在函數(shù)第一次掉用的時(shí)候執(zhí)行，在第一次調(diào)用過(guò)程中，該函數(shù)會(huì)被覆蓋為另一個(gè)按照合適方式執(zhí)行的函數(shù)，這樣任何對(duì)原函數(shù)的調(diào)用就不用再經(jīng)過(guò)執(zhí)行的分支了2013-08-08
這篇文章主要介紹了JavaScript中setter和getter方法介紹的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
js遍歷添加欄目類添加css 再點(diǎn)擊其它刪除css【推薦】
這篇文章主要介紹了js遍歷添加欄目類添加css 再點(diǎn)擊其它刪除css的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要為大家介紹了GoJs分組繪圖模板go.Group使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了如何利用微信小程序制作一個(gè)打卡時(shí)鐘，分為工作和休息兩種狀態(tài)，用戶可以設(shè)置相應(yīng)的時(shí)間，所有的時(shí)鐘記錄都會(huì)被保存下來(lái)，感興趣的可以了解一下2022-04-04
JS自調(diào)用匿名函數(shù)具體實(shí)現(xiàn)
定義一個(gè)函數(shù)用做臨時(shí)的命名空間，在這個(gè)命名空間內(nèi)定義的變量都不會(huì)污染到全局命名空間,需要的朋友可以參考下2014-02-02
JavaScript 實(shí)現(xiàn)繼承的幾種方式
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)繼承的幾種方式，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02