表单验证
Posted 早晨我在雨中采花
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单验证相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>注册页面</title> <link href="css/common.css" rel="stylesheet" /> <link href="css/pg-header.css" rel="stylesheet" /> <link href="css/account.css" rel="stylesheet" /> </head> <body> <div class="pg-header"> <div class="header-top"> <div class="account-container bg"> <ul class="top-left"> <li>*<a>收藏本站</a></li> </ul> <ul class="top-right"> <li><a href=‘/account/login‘>登录</a></li> <li><a href=‘/account/register‘>免费注册</a></li> <li><a href=‘/account/manage‘>我的订单</a></li> <li><a>VIP 会员俱乐部</a></li> <li class="menu" onmouseover="show_menu(this);" onmouseout="hide_menu(this)"> <span>客户服务<i class="triangle down"></i></span> <div class="hide" style="position:relative;"> <ul class="help-menu"> <li><a href="/article_cat-6/article-101.html" target="_blank" title="购买流程" rel="nofollow">购买流程</a></li> <li><a href="/article_cat-6/article-646.html" onclick="" target="_blank" title="在线帮助" rel="nofollow">在线帮助</a></li> </ul> </div> </li> </ul> <div class="clearfix"></div> </div> </div> </div> <div class="pg-body"> <div class=‘account-container‘> <div class=‘header clearfix‘> <div> <a href="/home/index"> <img src="images/logo_small.png"> </a> </div> </div> <div class=‘body clearfix‘> <div class=‘register left‘> <div> <h1 class=‘mb20‘>注册新用户</h1> <form id=‘Form‘ method=‘POST‘ action=‘/account/register‘> <div class=‘group‘> <label class=‘tip‘><span class="red">*</span>用户名：</label> <input type=‘text‘ require=‘true‘ label=‘用户名‘ Field=‘string‘ range=‘4-40‘ name=‘username‘ /> <i class=‘i-name‘></i> </div> <div class=‘group‘> <label class=‘tip‘><span class="red">*</span>手机号：</label> <input type=‘text‘ require=‘true‘ label=‘手机号‘ mobile=‘true‘ name=‘telphone‘ /> <i class=‘i-phone‘></i> </div> <div class=‘group‘> <label class=‘tip‘><span class="red">*</span>登录密码：</label> <input type=‘password‘ require=‘true‘ label=‘登录密码‘ min-len=‘6‘ name=‘pwd‘ /> <i class=‘i-pwd‘></i> </div> <div class=‘group‘> <label class=‘tip‘><span class="red">*</span>确认密码：</label> <input type=‘password‘ require=‘true‘ label=‘确认密码‘ confirm-to=‘pwd‘ name=‘confirmpwd‘ /> <i class=‘i-pwd‘></i> </div> <div class=‘group‘> <label class=‘tip‘><span class="red">*</span>验证码：</label> <input type=‘text‘ require=‘true‘ label=‘验证码‘ style=‘width:80px;‘ name=‘checkcode‘ /> <a style=‘width:125px;display:inline-block;‘><img class=‘checkcode‘ onclick=‘ChangeCode();‘ id=‘imgCode‘ src=‘/account/check‘ /></a> </div> <div class=‘group font12‘> <label class=‘tip‘></label> <label style=‘width:246px;display: inline-block;‘> <input id=‘protocol‘ name=‘protocol‘ type=‘checkbox‘ checked=‘checked‘ /><span>我已阅读并同意<a href=‘#‘>《用户注册协议》</a></span> </label> </div> <div class=‘group‘> <label class=‘tip‘></label> <input type=‘submit‘ class=‘submit‘ value=‘同意以上协议并注册‘ /> </div> </form> </div> </div> <div class=‘more left‘> <div class=‘mg10 font12‘>我已经注册，现在就<a href=‘/account/login‘ class=‘ml5‘>登录</a></div> <div class=‘mg10 mt30‘><img src="/statics/images/hongbao.jpg"></div> </div> </div> </div> </div> <div class="pg-footer"> <div class=‘account-container‘ style=‘text-align:center;‘> ? 2004-2015 www.autohome.com.cn All Rights Reserved. 老男孩 版权所有 </div> </div> <script src="js/jquery-1.8.2.min.js"></script> <script src="js/wupeiqi.js"></script> <script type="text/javascript"> $(function(){ $.register(‘#Form‘,‘‘); }) function show_menu(arg) { $(arg).find(".down").addClass("up").removeClass("down"); $(arg).find(".hide").addClass("show").removeClass("hide"); } function hide_menu(arg) { $(arg).find(".up").addClass("down").removeClass("up"); $(arg).find(".show").addClass("hide").removeClass("show"); } function ChangeCode() { var code = document.getElementById(‘imgCode‘); code.src += ‘?‘; } </script> </body> </html>
(function(jq){
function ErrorMessage(container,msg){
$error = container.find("label[class=‘input-error‘]");
if($error.length>0){
$error.text(msg);
}else{
var temp = "<label class=‘input-error‘>"+msg+"</label>";
container.append(temp);
}
}
function EmptyError(container){
$error = container.find("label[class=‘input-error‘]");
if($error.length>0){
$error.remove();
}
}
jq.extend({
‘CheckAll‘:function(targetcontainer){
$(targetcontainer).find(‘:checkbox‘).attr(‘checked‘,true);
},
‘UnCheckAll‘:function(targetcontainer){
$(targetcontainer).find(‘:checkbox‘).attr(‘checked‘,false);
},
‘ReverseCheck‘:function(targetcontainer){
$(targetcontainer).find(‘:checkbox‘).each(function(){
var check = $(this).attr(‘checked‘);
console.log(check);
if(check){
$(this).attr(‘checked‘,false);
}else{
$(this).attr(‘checked‘,true);
}
})
},
‘Hide‘:function(target){
$(target).addClass(‘hide‘);
},
‘Show‘:function(target){
$(target).removeClass(‘hide‘);
},
‘register‘:function(form,summaryStatusId){
$(form).find(‘:submit‘).click(function(){
var flag = true;
$(form).find(‘:text,:password‘).each(function(){
var name = $(this).attr(‘name‘);
var label = $(this).attr(‘label‘);
var val = $(this).val();
var $parent = $(this).parent();
//<label class=‘input-error‘>用户名长度只能在4-20位字符之间</label>
//<label class=‘input-error‘>用户名只能由中文、英文、数字及"-"、"_"组成</label>
var required = $(this).attr(‘require‘);
if(required){
if(!val || val.trim() == ‘‘){
flag = false;
ErrorMessage($parent,label+‘不能为空.‘);
return false;
}
}
var confirm_to = $(this).attr(‘confirm-to‘);
if(confirm_to){
var $original = $(form).find("input[name=‘"+confirm_to+"‘]");
if($original.val().trim()!=val.trim()){
flag = false;
ErrorMessage($parent,‘两次密码输入不一致.‘);
return false;
}
}
var number = $(this).attr(‘number‘);
if(number){
if(!$.isNumeric(number)){
flag = false;
ErrorMessage($parent,label+‘必须为数字.‘);
return false;
}
}
var mobile = $(this).attr(‘mobile‘);
if(mobile){
var reg = /^1[3|5|8]\d{9}$/;
if(!reg.test(val)){
flag = false;
ErrorMessage($parent,label+‘格式错误.‘);
return false;
}
}
var min = $(this).attr(‘min-len‘);
if(min){
var len = parseInt(min)
if(val.length<len){
flag = false;
ErrorMessage($parent,label+‘最小长度为‘+min+‘.‘);
return false;
}
}
var max = $(this).attr(‘max-len‘);
if(max){
var len = parseInt(max)
if(val.length>len){
flag = false;
ErrorMessage($parent,label+‘最大长度为‘+max+‘.‘);
return false;
}
}
var range = $(this).attr(‘range‘);
if(range){
var len = range.split(‘-‘);
if(val.length<parseInt(len[0])||val.length>parseInt(len[1])){
flag = false;
ErrorMessage($parent,label+‘长度只能在‘+len[0]+‘-‘+len[1]+‘位字符之间.‘);
return false;
}
}
var field = $(this).attr(‘Field‘);
if(field==‘string‘){
var reg = /^\w+$/;
if(!reg.test(val)){
flag = false;
ErrorMessage($parent,label+‘只能由英文、数字及"_"组成.‘);
return false;
}
}
EmptyError($parent);
});
var check = $("#protocol").prop(‘checked‘);
if(!check){
flag = false;
try{
ErrorMessage($("#protocol").parent().parent(),‘请阅读用户注册协议.‘);
}catch(e){
flag = false;
}
}else{
EmptyError($("#protocol").parent().parent());
}
return flag;
});
},
‘login‘:function(form,summaryStatusId){
$(form).find(‘:submit‘).click(function(){
var flag = true;
$(form).find(‘:text,:password‘).each(function(){
var name = $(this).attr(‘name‘);
var label = $(this).attr(‘label‘);
var val = $(this).val();
var $parent = $(this).parent();
var required = $(this).attr(‘require‘);
if(required){
if(!val || val.trim() == ‘‘){
flag = false;
ErrorMessage($parent,label+‘不能为空.‘);
return false;
}
}
EmptyError($parent);
});
return flag;
});
},
});
})(jQuery)
以上是关于表单验证的主要内容，如果未能解决你的问题，请参考以下文章
原生JavaScript判断是否为邮箱危险字符验证长度验证网址验证小数整数浮点数等常用的验证
ajaxFileUpload上传带参数文件及JS验证文件大小
SpringBoot中表单提交报错“Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported“(代码片段