表单校验代码，可运行

liuxf196921

已于 2022-05-11 16:06:26 修改

阅读量348

点赞数

分类专栏：前端开发文章标签： html bootstrap css

于 2019-03-06 20:51:48 首次发布

本文链接：https://blog.csdn.net/liuxf196921/article/details/88255269

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

/*

index.html

*/

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script

src="https://code.jquery.com/jquery-3.3.1.js"

integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="

crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style>

html,body{

margin:0;

padding:0;

background-color:#eee;

}

form.login-region{

width:40%;

height:auto;

padding:20px;

margin:auto;

margin-top:50px;

background-color:#fff;

border:1px solid #bbb;

</style>

</head>

<body>

<form id="loginForm" class="form-horizontal login-region" autocomplete="false">

<div class="form-group">

<label for="inputEmail3" class="col-sm-2 control-label">Email</label>

<div class="col-sm-10">

<input type="email" class="form-control" id="inputEmail3" placeholder="Email"

data-bv-require="true"

data-bv-require-message="邮箱地址为必填项"

data-bv-email="email"

data-bv-email-message="邮箱地址不合法"

>

</div>

</div>

<div class="form-group">

<label for="inputPassword3" class="col-sm-2 control-label">Password</label>

<div class="col-sm-10">

<!-- 字母数字下划线6-12位 -->

<input type="password" class="form-control" id="inputPassword3" placeholder="Password"

data-bv-require="true"

data-bv-require-message="密码为必填项"

data-bv-regex="^\w{6,12}$"

data-bv-regex-message="密码为6-12位数据、字母、下划线"

>

</div>

</div>

<div class="form-group">

<label for="inputNickName" class="col-sm-2 control-label">NickName</label>

<div class="col-sm-10">

<!-- 字母1位以上 -->

<input type="password" class="form-control" id="inputNickName" placeholder="NickName"

data-bv-regex="^[a-zA-Z]+$"

>

</div>

</div>

<div class="form-group">

<label for="inputNickName" class="col-sm-2 control-label">CardId</label>

<div class="col-sm-10">

<!-- 字母1位以上 -->

<input type="text" class="form-control" id="inputNickName" placeholder="NickName"

data-bv-require="true"

data-bv-require-message="身份证为必填项"

data-bv-cardid="true"

data-bv-cardid-message="身份证不合法"

>

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<input type="submit" class="btn btn-default" value="Sign in">

</div>

</div>

</form>

<script src="assets/js/plug/bootstrap-validator/bootstrap-validator.1.0.1.js"> </script>

<script src="assets/js/common.js"> </script>

<script>

$("#loginForm").bootstrapValidator({

raise:"keyup",

//errorMsg:"validate failed",

})

</script>

</body>

</html>



/*

commcon.js

*/

$.fn.bootstrapValidator.extendRules({

"cardid":function(){

//console.log("身份证被校验");

return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.val());

},

"mobile":function(){

return true;

},

});



/*

bootstrap-validator.1.0.1.js

*/

//author:liuxf

(function(global, factory,plug){

factory.call(global,global.jQuery,plug);

}(typeof window !== "undefined" ? window : this, function( $, plug ) {

//默认配置

var __DEFS__={

raise:"change",//触发事件

prex:"bv-",//前缀

errorMsg:"您输入的内容不合法",//默认错误提示信息

};

var __RULE__={

"require":function(){

//console.log(this.val());

return this.val() && this.val()!=="";

},

"number":function(){

return !isNaN(this.val());

},

"integer":function(){

return true;

},

"email":function(){

return /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(this.val());

},

"length":function(){

return this.val().length==Number(this.data(__DEFS__.prex+"length"));

},

"regex":function(){

//console.log(this.val());

return new RegExp(this.data(__DEFS__.prex+"regex")).test(this.val());

},

};

$.fn[plug]=function(ops){

if(this.is("Form")){

var that=$.extend(this,__DEFS__,ops);

var $fields=this.find("input,textarea,select").not("[type=submit],[type=button],[type=reset]");

$fields.on(this.raise,function(){

var $field=$(this);

var $group=$field.parents(".form-group:first");

$group.removeClass("has-success has-error");

$group.find(".help-block").remove();

var result=false;

var msg=that.errorMsg;

$.each(__RULE__,function(rule,active){

if($field.data(that.prex+rule)){

result=active.call($field);

console.log(that.prex+rule);

if(!result){

msg=$field.data(that.prex+rule+"-message") || that.errorMsg;

$group.addClass("has-error");

$field.after("<span class=\"help-block\">"+msg+"</span>");

return false;

}else{

$group.addClass("has-success");

}

}

})

});

this.extendRules=$.fn[plug].extendRules;

return this;

}else{

throw new Error("目标元素非表单元素");

}

}

$.fn[plug].extendRules=function(rules){

$.extend(__RULE__,rules);

}

},"bootstrapValidator"))

liuxf196921

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单校验代码，可运行

/*index.html*/&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0&qu
复制链接

扫一扫