基于Bootstrap 3 JQuery及正则表达式的表单验证功能

昨天小编在研究regexp，今天小编抽空给大家分享表单验证。

主要功能：

用户名必须在5-25个字符之内，而且只能使用字母、数字或下划线，否则不让通过。密码必须在5-25个字符之内，而且只能使用字母或数字（大小写敏感),否则不让通过。根据不同密码程度，下面的低、中和高的会改变背景颜色。确认密码就不说啦。验证码只是做了个样子，反正就是设成必须是5个数字复选框必须打勾啦，不然不让通过。点击注册按钮，会有相应的提示框（可关闭)弹出HTML:

body div class=' container ' form class=' form-横置！-username-div class=' form-group ' label class=' col-sm-3 control-label ' username/label div class=' col-sm-5 control-div '输入类型='text' class='form-control输入“用户名”占位符='字母，数字或下划线/div class=' col-sm-4 control-div ' span class='提示提示-用户名/span/div class=' col-sm-offset-3 col-sm-5 count '/div/div！-pwd-div class=' form-group ' label class=' col-sm-3 control-label ' password/label div class=' col-sm-5 control-div '输入类型='password' class='form-control输入-pwd“占位符=”字母或数字。区分大小写/div class=' col-sm-4 control-div ' span class='提示提示-pwd '/span/div class=' col-sm-offset-3 col-sm-5 control-div pwd-judge ' div class=' pwd-judge-LV-w active ' weak/div class=' pwd-judge-LV-LV-m '中/div class=' pwd-judge-LV-h ' high/div/div/div！-确认pwd-div类='表单-组'标签类=' col-sm-3控件-标签'确认密码/标签div类=' col-sm-5控件-div '输入类型='password' class='form-control输入-pwd-确认'占位符='确认密码'/div class=' col-sm-4 control-div ' span class=' hint-pwd-Confirm '/span/div/div！-veri Code-div class=' form-group '标签class=' col-sm-3 control-label '验证码/标签div class=' col-sm-2 control-div '输入类型='text' class='form-control输入“验证代码”占位符='验证码'/div class=' col-sm-3 control-div veri-Code-img ' img src=' http://I 1。piimg。com/583742/0be 543234 DAE 33-agreement-div class=' form-group ' div class=' col-sm-offset-3 col-sm-10 control-div ' div class=' checkbox '标签输入类型=' checkbox ' class=' input-checkbox '我同意这个协议/a. /label /div /div！-button-div class=' form-group ' div class=' col-sm-offset-3 col-sm-2 control-div ' button type=' button ' class=' BTN BTN-成功BTN-register ' register/button/div/form/div！-注册提示-div class='警报警报-成功警报-禁用注册-成功'角色='警报'按钮类型='button' class='close '数据-disable=' alert ' aria-label=' Close ' span aria-hidden=' true '/span/button strong注册成功/strong祝贺您！/div class='警报警报-危险警报-禁用寄存器-失败'角色='警报'按钮类型='button' class='close '数据-禁用='警报'区域-标签='关闭'区域-隐藏='真'/区域/按钮强注册失败./strong请检查表单，然后重试/div！-footer-footer class=' text-center '由a href=' http://blog设计。csdn。net/alen hy ' target=' _ blank ' alen Hu/a/页脚/正文正则表达式部分：

判断用户名：/^\w{5,25}$/g。

判断密码：/^[a-zA-Z0-9]{5,25}$/g。

判断验证码：/^\d{5}$/g。

JQuery:

用户名：

函数username(){//var username=$(').输入-用户名');var usernameVal=用户名。val()；var usernameLen=usernameval。长度；var usernameCount=$(' .count’)；var usernameHint=$(' .提示-用户名');var usernamereg=/^\w{5,25}$/g；//用户名长度计数用户名计数。文本(usernameLen '字符')；//用户名长度判断if(usernamereg。test(usernameVal)){ username hint。html(' I class=' fa-check ' aria-hidden=' true '/I ')；返回真；} else { usernamehint。html(' I class=' fa-info-circle ' aria-hidden=' true '/I从5到25个字符。);返回false}}密码：

函数pwd() { //var var pwd=$(').输入-pwd ')；var pwdVal=pwd。val()；var pwdLen=pwdval . length var pwdHint=$(' .提示-pwd ')；/^[a-za-z0-9]{5,25}$/g；//pwd长度判断if(pwdreg。test(pwdVal)){//转到勾选pwdhint。html(' I class=' fa fa-check ' aria-hidden=' true '/I ')；//pwd lv bgd颜色if (pwdLen=5 pwdLen=10) { $(').' LV-w ' .添加CLaSS(' active ')；$('.' LV-w ' .兄弟姐妹()。移除CLaSS(' active ')；} else if (pwdLen=11 pwdLen=20) { $(' .' LV-m ' .添加CLaSS(' active ')；$('.' LV-m ' .兄弟姐妹()。移除CLaSS(' active ')；} else if (pwdLen=21 pwdLen=25) { $(' .' LV-h ' .添加CLaSS(' active ')；$('.' LV-h ' .兄弟姐妹()。移除CLaSS(' active ')；}返回true} else { pwdhint。html(' I class=' fa fa-info-circle ' aria-hidden=' true '/I从5到25个字符。);$('.' LV-w ' .添加CLaSS(' active ')；$('.' LV-w ' .兄弟姐妹()。移除CLaSS(' active ')；返回false}}确认密码：

函数pwdconfim(){//var var pwd=$(').输入-pwd ')；var pwdVal=pwd。val()；var pwdConf=$(' .输入-pwd-确认');var pwdconffal=pwdconf。val()；var pwdConfHint=$(' .提示-pwd-确认');//pwd确认判断if(pwdVal===pwd config fal){ pwd config hint。html(' I class=' fa fa-check ' aria-hidden=' true '/I ')；返回真；} else { pwdconfhint。html(' I class=' fa-info-circle ' aria-hidden=' true '/I Password confirm ');返回false}}验证码：

函数veriCode() { //var var veriCode=$(').输入验证代码');var veriCodeVal=vericode。val()；var veriCodeLen=vericodeval。长度；var veriCodeHint=$(' .提示-验证代码');var vericodereg=/^\d{5}$/g；//veri代码长度判断if(vericodereg。test(veriCodeVal)){ vericodehint。html(' I class=' fa-check ' aria-hidden=' true '/I ')；返回真；} else { vericodehint。html(' I class=' fa-info-circle ' aria-hidden=' true '/I请输入验证码');返回false} }复选框：

function CheckBox(){//var var CheckBox=$(' .输入-复选框');//如果(CheckBox。is(' : CheckBox '){ 0返回没错，则选中；} else {返回false}}最终注册：

函数寄存器(){//exec CheckBox()；//var var successPanel=$(' .register-success’)；var failedPanel=$(' .register-failed’)；//判断if(username()pwd()pwd confim()veriCode()CheckBox()){ successpanel。fade in()；} else {失败的面板。fade in()；}}$(文档)。就绪()执行：

$(文档)。ready(function() { $(')).输入-用户名')。密钥（用户名);$('.输入-pwd ').键盘(pwd)；$('.输入-pwd-确认')。key up(pwd confim)；$('.输入验证代码')。键入(veriCode)；$('.BTN寄存器')。点击（注册);});效果图：

演示：

演示在这儿，欢迎来通过正则表达式验证表单。

以上所述是小编给大家介绍的基于Bootstrap 3 JQuery及正则表达式的表单验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！