基于Bootstrap jQuery实现表单验证

这可能是一种常见的做法，前台和后台最初接触的业务是用户注册和登录。当今社会坚持以人为本的理念，网站发展过程中也是如此。用户不仅是我们更多面对的对象，也是核心对象。一开始，用户注册和登录尤为重要。

事实上，用户注册和登录的难度往往比我们想象的要大。例如，表单验证涵盖了相当多的内容。就前台而言，您需要知道：

1.正则表达式的基本理解。

其实正规化并不难，学了之后能给你带来很大的成就感，享受事半功倍的效果。

2.ajax异步请求。

验证用户名是否存在，用户登录时账号或密码错误时，会给出相应的提示。

3.一些方便的验证库，比如jQuery.validate

由于这些共同的需求和一定的复杂性，一些优秀的类库，如bootstrap form和jquery . validate form verification，被设计用来为人们解决UI和表单验证问题。

下面是我用bootstrap jQuery.validate制作的界面：

一、bootstrap3基本形态和横向形态。

1.基本形式。

的基本表单结构是Bootstrap自己的，创建基本表单的步骤如下：

将角色='form '添加到父元素表单。将标签和控件放在一个有类的div中。表单组。这是获得最佳间距所必需的。添加类别。表单-控制所有文本元素的输入、文本区域和选择。

form role=' form ' div class=' form-group '标签对=' name '/labe input type=' text ' class=' form-control ' id=' name ' placeholder='请输入名称'/div/form的影响如下：

2.水平形式。

在理解横向形态之间，我们应该对bootstrap网格系统有所了解。

Bootstrap包含一个响应迅速、移动优先、不固定的网格系统，随着设备或视口大小的增加，该系统可以扩展到12列。它包含用于简单布局选项的预定义类和用于生成更多语义布局的强大混合类。

随着屏幕或视口大小的增加，响应网格系统将自动分成多达12列，这意味着宽度被定义为百分比。

横向形式与其他形式的区别不仅在于标签的数量，还在于呈现的形式。要创建具有水平布局的表单，请按照下列步骤操作：

1:添加类。form-与父窗体元素水平。第二步：用类将标签和控件放入div。表单组。第三步：添加类。标签的控制标签。

Form class=' form-horizontal '角色=' form' div class=' form-group '标签为=' first name ' class=' col-sm-2 control-label ' name/label div class=' col-sm-10 '输入类型=' text ' class=' form-control ' id=' first name '占位符='请输入一个名称'/div /div/form如下：

第二，jQuery.validate自定义验证方法。

1.自定义验证方法。

//手机号码验证jquery . validator . addmethod(' is phone '，function (value，element){ var length=value . length；返回this . optional(element)| |(length==11 /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))\ d { 8 })$/。测试(值))；}，'请正确填写您的手机号码');2.调用用户定义的验证。

规则： { phone : { required d : true，isphone : true}} 3。自定义错误显示。

三.register.html

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML标题注册/title meta http-equiv=' pragma ' content=' no-cache ' meta http-equiv=' cache-control ' content=' no-cache ' meta http-equiv=' expires ' content=' 0 ' link type=' text/CSS ' href=' jslib/bootstrap-3。3 .5/CSS/bootstrap。量滴CSS ' rel='样式表脚本src=' http 3360 jslib/jquery-1。9 .1 .量滴js ' type=' text '宽度： 1000像素；margin:自动订购-image:无；padd : 30pxborder-radius : 3px；}/style/head body h1 class=' text-center text-danger '用户注册/h1br form id=' register-form ' role=' form ' class=' form-horizontal ' method=' get ' div class=' form-group ' label class=' col-sm-2 control-label ' for=' first name '用户名：/label div class=' col-sm-5 ' input class=' form-control ' id=' first name ' name=' first name '/div/div class=' form-group ' label class=col-sm-2 control-label '代表=' password '密码：/label div class=' col-sm-5 ' input class=' form-control ' id=' password ' name=' password ' type=' password '/div/div class=' form-group ' label class=' col-sm-2 control-label ' for=' confirm _ password '确认密码：/label div class=' col-sm-5 ' input class=' form-control ' id=' confirm _ password ' name=' confirm _ password ' type=' password '/div/div class=' form-group ' label class=' col-sm-2 control-label ' for=' email ' e-Mail:/label div class=' col-sm-5 ' input class=' form-control ' id=' email ' name=' email '//div/div class=' form-group ' label class=' col-sm-2 control-label ' for=' phone '手机号码：/label div class=' col-sm-5 ' input class=' form-control ' id=' phone ' name=' phone '/div/div div class=' form-group ' label class=' col-sm-2 control-label ' for=' tel '固定电话：/label div class=' col-sm-5 ' input class=' form-control ' id=' tel ' name=' tel '/div/div div class=' form-group ' label class=' col-sm-2 control-label ' for=' address '家庭住址：/label div class=' col-sm-5 ' input class=' form-control ' id=' address ' name=' address '/div/div class=' form-group ' div class=' col-MD-offset-2 col-MD-10 '按钮类型=' submit '=' BTN BTN-初选BTN-sm '注册/button button type=' reset ' class=' BTN BTN-主BTN-sm '重置/button /div /div /form/body/html四、form.js

$(文档)。就绪（函数(){ //手机号码验证jquery。验证器。addmethod(' isPhone '，函数（值，元素){可变长度=值.长度返回这个。可选(元素)| |(长度==11 /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))\ d { 8 })$/.测试（值));}, '请正确填写您的手机号码。');//电话号码验证jquery。验证器。addmethod(' istel '，函数(值，元素){ var tel=/^(\d{3,4}-)？\d{7，8 } $/g；//区号-3、4位号码-7、8位返回这个。可选(元素)| |(电话。测试(值))；}, '请正确填写您的电话号码。');//匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符jquery。验证器。add method(' ISWd '，函数（值，元素){ var str=值如果(字符串长度6 ||字符串长度18)返回falseif(！/^[a-zA-Z]/.测试(字符串))返回falseif(！/[0-9]/.测试(字符串))返回条件返回假返回this.optional(元素)|| /[^A-Za-z0-9]/.测试；}, '以字母开头，长度在6-12之间，必须包含数字和特殊字符。');$(' #注册表').验证({ errorElement : 'span '、errorClass : 'help-block ')，规则： {名字： '必填'，电子邮件： {必需： true ,}电子邮件：真实}，密码： {必填项：为真、isPwd :为真}、confirm _ password : {必填项33:为真、equalTo :请输入姓名，电子邮件： {必填项： '请输入电子邮件地址，电子邮件： '请输入正确的电子邮件地址},密码： {必填项： '请输入密码，minlength : jQuery.format('密码不能小于{0}个字符)}，confirm_password : {必选： '请输入确认密码，最小长度： '确认密码不能小于5个字符，等于： '两次输入密码不一致不一致},电话： {必填项： '请输入手机号码},电话： {必填项： '请输入座机号码},地址： {必需的： '请输入家庭地址，minlength : jQuery.format('家庭地址不能少于{0}个字符') } }, //自定义错误消息放到哪里错误放置：函数（错误，元素){ element.next().移除();//删除显示图标元素。after(' span class=' glyphicon glyphicon-remove form-control-feedback ' aria-hidden=' true '/span ')；element.closest(' .表单组')。追加（错误);//显示错误消息提示}, //给未通过验证的元素进行处理突出显示：函数（元素){ $(元素)。最近的('。表单组')。addClass(')有-错误有-反馈');}, //验证通过的处理成功：函数（标签){ var el=label.closest ' .表单组')。find(' input ')；el.next().移除();//与错误放置相似埃尔。after(' span class=' glyphicon glyphicon-ok form-control-feedback ' aria-hidden=' true '/span ')；label.closest(' .表单组')。removeClass('has-error ').addCLaSS('有反馈就有成功')；标签。移除()；}, });});源码下载：引导jQuery.validate实现表单验证

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

引导程序学习教程

引导程序实战教程

引导程序插件使用教程

以上就是引导jQuery.validate实现表单验证相关知识介绍，希望大家可以熟练掌握，设计自己的表单验证。