谈论表单验证

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

直接看演示：http://www.suchso.com/code/bootstrapvalidate/

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

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

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

2.ajax异步请求

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

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

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

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

Bootstrap3基本形式和水平形式

基本形式

基本表单结构是Bootstrap自己的，下面列出了创建基本表单的步骤：

将角色='form '添加到父元素表单。

将标签和控件放在一个有类的div中。表单组。这是获得最佳间距所必需的。

添加类别。表单-控制所有文本元素的输入、文本区域和选择。

对于=' name ' name/labe input type=' text ' class=' form-control ' id=' name ' placeholder='请输入名称'/div/form，表单角色=' form' div class=' form-group '标签具有以下效果：

水平形式

在理解横向形式之间，我们应该理解bootstrap网格系统。

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

随着屏幕或视口大小的增加，响应网格系统将自动划分为多达12列，也就是说，其宽度定义为百分比。

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

添加类别。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 .验证自定义验证方法

用户定义的验证方法

//手机号码验证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 })$/。测试(值))；}，'请正确填写您的手机号码');调用自定义检查

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

参数

类型

形容

系统默认值

错误类别

线

指定错误提示的css类名，并自定义错误提示的样式。

“错误”

错误元素

线

用什么标签来标记错误，默认是label，可以改成em。

标签

错误放置

功能

使用函数，您可以自定义错误的放置位置。

投入元素之后

成功

要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个钢性铸铁类，也可跟一个函数。

无

高光

功能

可以给未通过验证的元素加效果、闪烁等。

无

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表单。 射流研究…

$(文档)。就绪（函数(){ //手机号码验证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]/.测试(字符串))返回fasle返回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实现表单提交校验功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！