jquery用户输入表单验证js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery用户输入表单验证js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery用户输入表单验证</title>
<meta name="keywords" content="内容校验，jQuery，表单验证 " />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-zh.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<script type="text/javascript"> 
$(document).ready(function() {

$("input").each(function(){
$(this).attr("value", $(this).attr("tipholder"));
});

$('input').focus(function() {
var title = $(this).attr('tipholder');
if ($(this).val() == title) {
$(this).val('');
}
}).blur(function() {
var title = $(this).attr('tipholder');
if ($(this).val() == '') {
$(this).val(title);
}
});	

$("#reg").validationEngine('attach');

$("#regSubmit").click(function(check) {	

if($("#reg").validationEngine('validate')){
var rmailval=$('#mail').val();
var rpwdval=$('#pwd').val();
var rnameval=$('#fullname').val();
$('.webbody').html('恭喜你，注册成功！');
}

check.preventDefault();//此处阻止提交表单  
});

});
</script>
</head>
<body>

<div id="web">
<div id="container">	
<div class="content">
<section class="webbody">

<div id="reg_title">用户注册</div>

<form method="post" id="reg">
<p>
<input class="email formtip validate[required,custom[email]]"  id="mail" type="text" tipholder="电子邮件" class=""/>
</p>

<p>
<input class="name formtip validate[required]"  id="fullname" type="text" tipholder="名称"/>
</p>

<p>
<input class="pwd formtip validate[required]"  id="pwd" type="password" tipholder="输入你的密码"/>
</p>		

<p>
<input class="submit" id="regSubmit" type="image" value="注册" src="images/reg.png">
</p>
<p id="mail-tip"></p>
</form>
</section>
</div>
</div>
</div>
</body>
</html>

JS代码(html5.js):

/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed Uncompressed source:https://github.com/aFarkas/html5shiv */
(function(a,b){
	function h(a,b){
	var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
	return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function i(){
	var a=l.elements;
	return typeof a=="string"?a.split(" "):a}
function j(a){
	var b={
}
,c=a.createElement,f=a.createDocumentFragment,g=f();
	a.createElement=function(a){
	if(!l.shivMethods)return c(a);
	var f;
	return b[a]?f=b[a].cloneNode():e.test(a)?f=(b[a]=c(a)).cloneNode():f=c(a),f.canHaveChildren&&!d.test(a)?g.appendChild(f):f}
,a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+i().join().replace(/\w+/g,function(a){
	return c(a),g.createElement(a),'c("'+a+'")'}
)+");
	return n}
")(l,g)}
function k(a){
	var b;
	return a.documentShived?a:(l.shivCSS&&!f&&(b=!!h(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
	display:block}
audio{
	display:none}
canvas,video{
	display:inline-block;
	*display:inline;
	*zoom:1}
[hidden]{
	display:none}
audio[controls]{
	display:inline-block;
	*display:inline;
	*zoom:1}
mark{
	background:#FF0;
	color:#000}
")),g||(b=!j(a)),b&&(a.documentShived=b),a)}
var c=a.html5||{
}
,d=/^<|^(?:button|form|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,f,g;
	(function(){
	var c=b.createElement("a");
	c.innerHTML="<xyz></xyz>",f="hidden"in c,f&&typeof injectElementWithStyles=="function"&&injectElementWithStyles("#modernizr{
}
",function(b){
	b.hidden=!0,f=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).display=="none"}
),g=c.childNodes.length==1||function(){
	try{
	b.createElement("a")}
catch(a){
	return!0}
var c=b.createDocumentFragment();
	return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}
()}
)();
	var l={
	elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:k}
;
	a.html5=l,k(b)}
)(this,document)

JS代码(jquery.validationEngine-zh.js):

(function($){
	$.fn.validationEngineLanguage = function(){
}
;
	$.validationEngineLanguage ={
	newLang:function(){
	$.validationEngineLanguage.allRules ={
	"required":{
	// Add your regex rules here,you can take telephone as an example "regex":"none","alertText":"姝ら」涓嶈兘涓虹┖","alertTextCheckboxMultiple":"* Please select an option","alertTextCheckboxe":"* This checkbox is required"}
,"minSize":{
	"regex":"none","alertText":"* Minimum ","alertText2":" characters allowed"}
,"maxSize":{
	"regex":"none","alertText":"* Maximum ","alertText2":" characters allowed"}
,"min":{
	"regex":"none","alertText":"* Minimum value is "}
,"max":{
	"regex":"none","alertText":"* Maximum value is "}
,"past":{
	"regex":"none","alertText":"* Date prior to "}
,"future":{
	"regex":"none","alertText":"* Date past "}
,"maxCheckbox":{
	"regex":"none","alertText":"* Checks allowed Exceeded"}
,"minCheckbox":{
	"regex":"none","alertText":"* Please select ","alertText2":" options"}
,"equals":{
	"regex":"none","alertText":"* Fields do not match"}
,"phone":{
	// credit:jquery.h5validate.js / orefalo "regex":/^([\+][0-9]{
	1,3}
[ \.\-])?([\(]{
	1}
[0-9]{
	2,6}
[\)])?([0-9 \.\-\/]{
	3,20}
)((x|ext|extension)[ ]?[0-9]{
	1,4}
)?$/,"alertText":"* Invalid phone number"}
,"email":{
	// Simplified,was not working in the Iphone browser "regex":/^([A-Za-z0-9_\-\.\'])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{
	2,6}
)$/,"alertText":"Email鏍煎紡鏈夎"}
,"integer":{
	"regex":/^[\-\+]?\d+$/,"alertText":"* Not a valid integer"}
,"number":{
	// Number,including positive,negative,and floating decimal. credit:orefalo "regex":/^[\-\+]?(([0-9]+)([\.,]([0-9]+))?|([\.,]([0-9]+))?)$/,"alertText":"* Invalid floating decimal number"}
,"date":{
	// Date in ISO format. Credit:bassistance "regex":/^\d{
	4}
[\/\-]\d{
	1,2}
[\/\-]\d{
	1,2}
$/,"alertText":"* Invalid date,must be in YYYY-MM-DD format"}
,"ipv4":{
	"regex":/^([1-9][0-9]{
	0,2}
)+\.([1-9][0-9]{
	0,2}
)+\.([1-9][0-9]{
	0,2}
)+\.([1-9][0-9]{
	0,2}
)+$/,"alertText":"* Invalid IP address"}
,"url":{
	"regex":/^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{
	2}
)|[!\$&'\(\)\*\+,;
	=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{
	2}
)|[!\$&'\(\)\*\+,;
	=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{
	2}
)|[!\$&'\(\)\*\+,;
	=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{
	2}
)|[!\$&'\(\)\*\+,;
	=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{
	2}
)|[!\$&'\(\)\*\+,;
	=]|:|@)|\/|\?)*)?$/,"alertText":"* Invalid URL"}
,"onlyNumberSp":{
	"regex":/^[0-9\ ]+$/,"alertText":"* Numbers only"}
,"onlyLetterSp":{
	"regex":/^[a-zA-Z\ \']+$/,"alertText":"* Letters only"}
,"onlyLetterNumber":{
	"regex":/^[0-9a-zA-Z]+$/,"alertText":"* No special characters allowed"}
,// --- CUSTOM RULES -- Those are specific to the demos,they can be removed or changed to your likings "ajaxUserCall":{
	"url":"home",// you may want to pass extra data on the ajax call "extraData":"name=eric","alertText":"* This user is already taken","alertTextLoad":"* Validating,please wait"}
,"ajaxNameCall":{
	// remote json service location "url":"ajaxtest.html",// error "alertText":"* This name is already taken",// if you provide an "alertTextOk",it will show as a green prompt when the field validates "alertTextOk":"* This name is available",// speaks by itself "alertTextLoad":"* Validating,please wait"}
,"validate2fields":{
	"alertText":"* Please input HELLO"}
}
;
}
}
;
	$.validationEngineLanguage.newLang();
}
)(jQuery);

CSS代码(main.css):

/*---common---*/
html{color:#cccccc;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0 none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;/*border:2px solid #CCC;*/
border:1px solid #000000;height:40px;padding:7px 30px 3px 5px;width:280px;-moz-border-radius:5px 5px 5px 5px;}
input,button,textarea,select{*font-size:100%;}
a{color:#41545F;text-decoration:none;}
a:hover{color:#41545F;}
body{font:14px/1.5em '寰蒋闆呴粦',Arial,Helvetica,sans-serif;color:#cccccc;background:url("../images/body_bg.jpg") no-repeat scroll center top #202020;}
#container{margin:0 auto;width:970px;}
#reg_title{margin:0;padding:10px 0px;font-size:16px;font-weight:bold;}
#reg p{clear:both;float:left;margin:0;padding:0 0 20px;width:320px;}
#reg input{padding-left:55px;padding-top:10px;padding-bottom:10px;}
#reg .submit{padding:0px;width:188px;height:40px;}
input.pwd{background:url("../images/bpwd.png") no-repeat scroll 10px center #FFFFFF;}
input.name{background:url("../images/bname.png") no-repeat scroll 10px center #FFFFFF;}
input.email{background:url("../images/bmail.png") no-repeat scroll 10px center #FFFFFF;}
input.formtip{float:left;height:20px;padding:7px 30px 3px 5px;}
.container{margin:0 auto;position:relative;width:960px;}
header{float:left;height:102px;width:100%;}
header nav{background-position:right top;background-repeat:no-repeat;height:98px;position:absolute;right:0;top:0;}
img#logo{margin:20px 0px;}
img{border:medium none;}
header nav{/*background-image:url("images/navbg.gif");*/
 background-position:right top;background-repeat:no-repeat;height:98px;position:absolute;right:0;top:0;}
header nav ul{list-style:none outside none;margin:40px 0 0 0;padding:0;}
header nav li{float:left;font-size:14px;margin:0 0;overflow:hidden;padding:10px;position:relative;}
.content{float:left;line-height:2em;margin:0;padding:30px 0 20px;position:relative;width:100%;}
#web .webbody{float:left;margin:0 30px 0 0px;width:495px;background:url("../images/dark.png");-moz-border-radius:8px 8px 8px 8px;padding:30px;}
#web aside{float:left;font-size:14px;margin:0px 0 0 15px;width:340px;background:url("../images/light.png");padding:20px 10px;-moz-border-radius:8px 8px 8px 8px;}
#weblist p{clear:both;float:left;margin:0;padding:0 0 20px;}
.col4{clear:both;overflow:hidden;padding:0 10px;width:940px;}
.col4 section{display:inline;float:left;margin-left:20px;}

CSS代码(validationEngine.jquery.css):

.inputContainer{position:relative;float:left;}
.formError{position:absolute;top:300px;left:300px;display:block;z-index:5000;cursor:pointer;}
.ajaxSubmit{padding:20px;background:#55ea55;border:1px solid #999;display:none}
.formError .formErrorContent{width:100%;background:#202020;position:relative;z-index:5001;color:#E68D36;width:150px;font-family:tahoma;font-size:14px;border:1px solid #555;box-shadow:0 0 6px #000;-moz-box-shadow:0 0 6px #000;-webkit-box-shadow:0 0 6px #000;padding:4px 10px 4px 10px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}
.greenPopup .formErrorContent{background:#33be40;}
.blackPopup .formErrorContent{background:#393939;color:#FFF;}
.formError .formErrorArrow{width:15px;margin:-2px 0 0 13px;position:relative;z-index:5006;}
.formError .formErrorArrowBottom{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;margin:0px 0 0 12px;top:2px;}
.formError .formErrorArrow div{border-left:1px solid #555;border-right:1px solid #555;box-shadow:0 2px 3px #444;-moz-box-shadow:0 2px 3px #444;-webkit-box-shadow:0 2px 3px #444;font-size:0px;height:1px;background:#202020;margin:0 auto;line-height:0;font-size:0;display:block;}
.formError .formErrorArrowBottom div{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
.greenPopup .formErrorArrow div{background:#33be40;}
.blackPopup .formErrorArrow div{background:#393939;color:#FFF;}
.formError .formErrorArrow .line10{width:15px;border:none;}
.formError .formErrorArrow .line9{width:13px;border:none;}
.formError .formErrorArrow .line8{width:11px;}
.formError .formErrorArrow .line7{width:9px;}
.formError .formErrorArrow .line6{width:7px;}
.formError .formErrorArrow .line5{width:5px;}
.formError .formErrorArrow .line4{width:3px;}
.formError .formErrorArrow .line3{width:1px;border-left:1px solid #555;border-right:1px solid #555;border-bottom:0 solid #555;}
.formError .formErrorArrow .line2{width:3px;border:none;background:#555;}
.formError .formErrorArrow .line1{width:1px;border:none;background:#555;}

附件:下载该文件资源,减少时间成本(增值服务)