郑州做网站hnqfu,wordpress更新文章到网页,icp备案流程,简单的生产管理系统这大概是一种惯例#xff0c;学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念#xff0c;在网站开发过程同样如此。User是我们面对较多的对象#xff0c;也是较核心的对象。最开始的用户注册和登陆这块#xff0c;也就尤为重要。用户注册和登…这大概是一种惯例学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念在网站开发过程同样如此。User是我们面对较多的对象也是较核心的对象。最开始的用户注册和登陆这块也就尤为重要。用户注册和登录其实往往比我们想象的难。就比如表单校验里面涵盖的内容其实挺多就前台而言你需要了解1.正则表达式的基本了解其实正则并不难并且在学会后能带给你极大的成就感享受那种事半功倍的效果吧。2.ajax异步请求在验证用户名是否存在、用户登录时账号或者密码错误时给出相应的提示。3.一些方便的验证库比如jQuery.validate正因为如此普遍的需求和一定的复杂性bootstrap表单和jQuery.validate表单校验等一些优秀的类库专为人们解决UI、表单校验问题。下面就是我用bootstrapjQuery.validate做的界面一、bootstrap3基本表单和水平表单1、基本表单基本的表单结构是 Bootstrap 自带的下面列出了创建基本表单的步骤向父元素 添加 roleform。把标签和控件放在一个带有 class .form-group 的 中。这是获取最佳间距所必需的。向所有的文本元素 、 和 添加 class .form-control。名称placeholder请输入名称效果如下2、水平表单在了解水平表单之间我们应该对bootstrap的网格系统有所了解。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类也包含了用于生成更多语义布局的功能强大的混合类。响应式网格系统随着屏幕或视口(viewport)尺寸的增加系统会自动分为最多12列,也就是说它是以百分比定义宽度的。水平表单与其他表单不仅标记的数量上不同而且表单的呈现形式也不同。如需创建一个水平布局的表单请按下面的几个步骤进行步骤1向父 元素添加 class .form-horizontal。步骤2把标签和控件放在一个带有 class .form-group 的 中。步骤3向标签添加 class .control-label。名字placeholder请输入名字效果如下二、jQuery.validate 自定义校验方法1、自定义校验方法// 手机号码验证jQuery.validator.addMethod(isPhone, function(value, element) {var length value.length;return this.optional(element) || (length 11 /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))\d{8})$/.test(value));}, 请正确填写您的手机号码。);2、调用自定义校验rules : {phone : {required : true,isPhone : true}}3、自定义错误显示三、register.html注册#register-form{border: 1px solid rgb(197, 197, 197);width: 1000px;margin: auto;border-image: none;padding: 30px;border-radius: 3px;}用户注册用户名密码确认密码E-Mail手机号码固定电话家庭住址注册重置四、form.js$(document).ready(function() {// 手机号码验证jQuery.validator.addMethod(isPhone, function(value, element) {var length value.length;return this.optional(element) || (length 11 /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))\d{8})$/.test(value));}, 请正确填写您的手机号码。);// 电话号码验证jQuery.validator.addMethod(isTel, function(value, element) {var tel /^(\d{3,4}-)?\d{7,8}$/g; // 区号3、4位 号码7、8位return this.optional(element) || (tel.test(value));}, 请正确填写您的电话号码。);// 匹配密码以字母开头长度在6-12之间必须包含数字和特殊字符。jQuery.validator.addMethod(isPwd, function(value, element) {var str value;if (str.length 6 || str.length 18)return false;if (!/^[a-zA-Z]/.test(str))return false;if (!/[0-9]/.test(str))return fasle;return this.optional(element) || /[^A-Za-z0-9]/.test(str);}, 以字母开头长度在6-12之间必须包含数字和特殊字符。);$(#register-form).validate({errorElement : span,errorClass : help-block,rules : {firstname : required,email : {required : true,email : true},password : {required : true,isPwd : true},confirm_password : {required : true,isPwd : true,equalTo : #password},phone : {required : true,isPhone : true},tel : {isTel : true},address : {minlength : 10}},messages : {firstname : 请输入姓名,email : {required : 请输入Email地址,email : 请输入正确的email地址},password : {required : 请输入密码,minlength : jQuery.format(密码不能小于{0}个字 符)},confirm_password : {required : 请输入确认密码,minlength : 确认密码不能小于5个字符,equalTo : 两次输入密码不一致不一致},phone : {required : 请输入手机号码},tel : {required : 请输入座机号码},address : {required : 请输入家庭地址,minlength : jQuery.format(家庭地址不能少于{0}个字符)}},//自定义错误消息放到哪里errorPlacement : function(error, element) {element.next().remove();//删除显示图标element.after();element.closest(.form-group).append(error);//显示错误消息提示},//给未通过验证的元素进行处理highlight : function(element) {$(element).closest(.form-group).addClass(has-error has-feedback);},//验证通过的处理success : function(label) {var ellabel.closest(.form-group).find(input);el.next().remove();//与errorPlacement相似el.after();label.closest(.form-group).removeClass(has-error).addClass(has-feedback has-success);label.remove();},});});如果大家还想深入学习可以点击这里进行学习再为大家附3个精彩的专题以上就是BootstrapjQuery.validate实现表单验证相关知识介绍希望大家可以熟练掌握设计自己的表单验证。
