-->
the form!
JQuery笔记-表单验证大全
jquery.validate.js 是 jquery 旗下的一个验证插件,借助 jquery 的优势,我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。
举个例子,有这么一个表单:
view plaincopy to clipboardprint?
在这个表单中,有名、姓、用户名、密码、确认密码和 email 。他们都为非空,并且电子邮件需要是格式正确的地址、确认密码和密码一致。使用 jQuery 验证最简单的方式是引入jquery.js 和 jquery validation.js 两个 js 文件。然后分别在 input 中加入 class 即:
view plaincopy to clipboardprint?
以下列出 validate 自带的默认验证
required: " 必选字段 ",
remote: " 请修正该字段 ",
email: " 请输入正确格式的电子邮件 ",
url: " 请输入合法的网址 ",
date: " 请输入合法的日期 ",
dateISO: " 请输入合法的日期 (ISO).",
number: " 请输入合法的数字 ",
digits: " 只能输入整数 ",
creditcard: " 请输入合法的信用卡号 ",
equalTo: " 请再次输入相同的值 ",
accept: " 请输入拥有合法后缀名的字符串 ",
maxlength: jQuery.format(" 请输入一个长度最多是 {0} 的字符串 "),
minlength: jQuery.format(" 请输入一个长度最少是 {0} 的字符串 "),
rangelength: jQuery.format(" 请输入一个长度介于 {0} 和 {1} 之间的字符串 "), range: jQuery.format(" 请输入一个介于 {0} 和 {1} 之间的值 "),
max: jQuery.format(" 请输入一个最大为 {0} 的值 "),
min: jQuery.format(" 请输入一个最小为 {0} 的值 ")
然后,在 document 的 read 事件中,加入如下方法:
$(document).ready(function(){
$("#signupForm").validate();
}
这样,当 form 被提交的时候,就会根据 input 指定的 class 来进行验证了。如果失败,form 的提交就会被阻止。并且,将提示信息显示在 input 的后面。
不过,这样感觉不好,因为验证规则侵入了我们的 html 代码。还有一个方式,便是使用“ rules”。我们将 input 的那些验证用 class 删除掉。然后修改 document 的 ready 事件响应代码:
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})
这样以来,也能达到相同的效果。
那么,接下的问题,就是显示的错误提示是默认的。我们需要使用自定义的提示:$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:" 必填项",
lastname:" 必填项",
username:" 必填项",
password:" 必填项",
confirm_password:{
required:" 必填项",
equalTo:" 密码不一致"
},
email:{
required:" 必填项",
email:" 格式有误"
}
}
});
})
如果你还想在错误信息上显示特别的样式 ( 比如字体为红色 ) 即可通过添加:
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
继续添加对输入密码长度的验证规则:$(document).ready(function(){ $("#signupForm").validate({ rules:{ firstname:"required", lastname:"required", username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:" 必填项",
lastname:" 必填项",
username:" 必填项",
password:{
required:" 必填项",
minlength:jQuery.format(" 密码长度不少于 {0} 位 "),
maxlength:jQuery.format(" 密码长度不超过 {0} 位 ")
},
confirm_password:{
required:" 必填项",
equalTo:" 密码不一致"
},
email:{
required:" 必填项",
email:" 格式有误"
}
}
});
})
使用remote
可以通过 event 指定触发效验方式(可选值有 keyup( 每次按键时 ) , blur( 当控件失去焦点时 ) ,不指定时就只在按提交按钮时触发)
$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})
如果通过指定 debug 为 true 则表单不会提交只能用来验证 ( 默认为提交 ) ,可用来调试
$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})
如果在提交前还需要进行一些自定义处理使用 submitHandler 参数
$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert( "success");
}
})
})
JQuery笔记(表单验证)二收藏
验证:
"https://www.doczj.com/doc/477085224.html,/TR/html4/loose.dtd" >
$(document).ready( function () {
// 1
$( "#myform" ).validate({
rules : {
fruit : "required"
},
errorPlacement : function (error, element) { //if
( element.is(":radio") )
error.appendTo(element.parent());
}
});
// 2
$( "#myinput" ).rules(
"add" ,
{
required : true ,
minlength : 2,
messages : {
required : "Required input" ,
minlength : jQuery.format( "Please, at least {0} characters are necessary" )
}
}
);
// 3
$( ":radio" ).each( function () {
$( this ).rules( "add" , {
required : true ,
minlength : 2,
messages : {
required : "Required input 必填 " ,
minlength : jQuery.format( "Please, at least {0} characters are necessary" )
}
}
)
});
});
参考:https://www.doczj.com/doc/477085224.html,/Plugins/Validation
rules( ) Returns: Options
Return the validations rules for the first selected element. rules( "add", rules ) Returns: Options
JQuery笔记(表单验证)三收藏
Test for jQuery validate() plugin
< type="text/javascript">
jQuery Validation Plugin Demo
Login Form
Username
Password
回到主页query-plugin-validation: |下载 |Changelog |Demos |Documentation
点击[Login]后如下图:
代码 errorcontainer-demo_1.html
view plaincopy to clipboardprint?
mce_src="https://www.doczj.com/doc/477085224.html,/view/trunk/plugins/validate/jquery.validate.js">
type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.met adata.js">
mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuer y Validation Plugin
Demo-->
the form!
| title="zip-Archive with source code, minified and packed version, demos and examples">下载
type="text/javascript">
JQuery笔记(表单验证)四 errorcontainer-demo_2.html 收藏
Test for jQuery validate() plugin
< type="text/javascript">
jQuery Validation Plugin Demo
There are serious errors in your form submission, please see below for details. Please enter your email address
Please enter your phone number (between 2 and 8 characters)
Please enter your address (at least 3 characters)
Please select an image (png, jpg, jpeg, gif)
Please select a document (doc, docx, txt, pdf)
Validating a complete form
Favorite Color Red Blue Yellow
web项目前端开发经验总结 最近这一个月完成了自己的第一个java web项目,是给某杂志社做的在线投稿系统,虽然进度很慢,但是中间确实学到了不少东西,深刻体会到了自己看几个月书都不如做一个项目来的实在。这个项目自己主要负责的是JSP页面、JS脚本、CSS样式表的编写,虽然主要做的是前端,但是在设计前端后台交互功能时,对MVC架构和数据库又多了一分了解,这一个月的时间,自己在技术上也确实成长了不少。 下面分成几块总结一下自己的这个项目中的心得吧: 1.项目开发流程:从确认需求开始,到原型设计,再到原型测试,这些都没什么说的了,主要是刚开始开发前端JSP页面时,自己走了很多弯路,想到有什么页面就写什么页面,GET和POST的路径也是随心所欲,想到什么名字就起什么名字,结果发现这样做严重影响了项目开发的进度,后来经过主管的提点后,我幡然醒悟,其实,面向对象的思想就贯穿在整个项目当中,在前面的原型设计的过程中,除了页面的设计还有数据库的设计,数据库的每个表就对应着Java中的每个实体类,这个类封装了数据库中的列作为属性,封装了数据库的增删改查作为方法,就拿这个投稿系统为例,实体主要有用户、稿件等等,实体间还有着一对一映射或者一对多映射等对应关系。其实,整个系统的开发就是围绕着这些个实体进行的,甚至于我们可以把实体名字做为二级目录,把实体的增删改查作为GET或POST 的路径,譬如account/add、paper/delete等等,有了这些路径,那么与之对应的GET和POST的Controller也就有了,接下来我们要做的就是,定义Controller中返回的视图,写完Controller后再把与实体相关的增删改查方法写到服务层中,再把项目的整个骨架搭起来,再去处理细节,很快的,这个项目就成型了。这里前端和后台的配合尤为重要,数据交互是整个系统的核心。 2.JSP页面设计:提到JSP页面,在这里我想说的一点是,其实JSP页面是在服务器生成的,那么传给JSP页面的变量、参数都会在服务器转化为它们具体的值,然后再传给客户端。JSP页面可以实现很多服务器端的功能,因为可以直接在页面嵌入JAVA代码,但是我们必须明确的一点是,JSP页面主要是用来呈现视图的,不要再其中套入大量的代码,要明确前端与后台的分工。 3.JSTL标签:JSTL标签就是JSP standard taglib,即JSP标准标签库,首先,EL表达式可以非常方便的取出Controller返回的View包含的Model,甚至都无需声明EL 表达式。其次,JSTL标签可以实现很多的逻辑控制功能,比如最基本的c:if判断、c:forEach 循环,甚至有更强大的c:choose,有了这些,我们可以大大简化代码量,JSP页面中用几十行java写的代码,有时用几句JSTL标签组合就实现了,此外,像fmt:parseDate和 fmt:formatDate也是很好用的标签,用于日期的解析和格式化,此外JSTL更有强大的函数标签库fn:,项目中我也只用到了fn:length取后台传的list的长度。要善用JSTL标签,但是又不要完全依赖于它,JSTL标签很方便、快捷,但是切记,JSTL功能有限,不要完全依赖于它。 4.shiro框架:shiro框架是apache的一款面向java web项目的权限控制框架,这个框架无论前端、后台都十分好用,在前端,我们可以使用shiro强大的标签库,通过用户角色赋予用户不同的访问权限。譬如,如果一个系统的用户有访客、用户、管理员三种角色,我们就可以通过shiro标签来控制游客不能访问哪些内容,页面向用户和管理员呈现的不同内容,这就是shiro标签的神奇之处。 5.sitemesh框架:这个主要是用来将所有页面套用固定格式,用以页面的复用,其实有些时候标签更为方便,而且sitemesh框架的内存开销是的二倍,还会导致拦截器出现一些莫名的bug,所以并不推荐使用。
求职意向:web前端工程师 工作经验 学历:本科计算机科学与技术 。 IT技能 熟练掌握以下技能: ●HTML5、CSS3以及flex弹性盒布局、响应式布局和自适应布局等页面布局; ●ECMAScript5、DOM操作文档、BOM操作浏览器和JSON数据格式,能够较好地理解闭包、作用域链、 构造函数、原型对象以及原型链等; ●ECMAScript6的基础内容如模板字符串、箭头函数、解构赋值、Promise、扩展运算符、class类等; ●前后端的交互方式,如jQuery的ajax方法,jsonp跨域,基于Promise的axios,以及正在不断获得浏览 器支持的fetch方法; ●基于jQuery框架的网页效果如tab切换、轮播图等,以及表单验证和cookie等插件,还有bootstrap响 应式框架和jquery easyUI框架; ●前端开发工具sublime、vscode、webstorm等,postman测试http请求,web服务器软件WAMP,前 端自动化构建工具gulp、webpack等,代码版本管理工具git和git客户端管理工具sourceTree ; ●Vue、vue-router、vuex状态管理和基于vue 的界面框架iview的使用; ●React、react-router、react-redux状态管理和基于react 的UI 框架(antd)的使用; 并了解以下内容: ●PHP+MySQL的基础,能做一些简单的数据接口,也可以用json-server模拟后台接口,以及faker模块创
4.使用iview 的Page 控件的页面改变方法,获取当前的页码,并且发送axios 请求获取相应数据,实现用户列表的分页。。 5.使用webpack 实现对模块打包、压缩; 负责模块:用户的登录注册、增删改查,分页功能的实现; 项目二:电器商城网站 项目描述:本项目是一个电器商场网站,致力于为用户提供更好的生活体验。 项目技术: 1.通react框架和bootstrap框架布局网页的基本结构; 2react-router的NavLink实现首页、登录、注册、详情页等页面的跳转; 3.使用jquery的validate插件实现对表单的验证; 4.swiper的Autoplay组件实现轮播图效果,以及tab切换,详情页的放大镜效果; 5.React组件挂载过后使用fetch方法实现图片的动态加载和数据更新; 6.使用route的params传递产品编号,然后跳转到相应的详情页; 7.使用webpack进行模块的打包和压缩; 负责模块:首页,用户的登录注册,详情页。 项目三:内容管理系统 项目描述: NodeJS+Mongodb+Express+jquery EasyUI做的内容管理系统 项目技术: 1.express开发框架快速搭建开发环境,使用express的路由进行页面的切换。 2.采用mvc设计模式,即model-view-controller模式; 3.使用基于分布式文件存储的MongoDB数据库,接口测试和http请求的psotman工具;
JavaWeb试题 一.单项选择(共20题,每题2分) 1.HTML的全称是什么( A ) A.HyperText Markup Language B.HyperTest Market Language C.HighTest Markup Language D.HyperText Market Language 2.以下选项中属于行内标签的是(A ) A、 span B、 p C、div D、hr 3.以下说法正确的是( C) A、background-color:设置文字颜色 B、back-corlor设置背景色 C、 background-color:设置背景色 D、 color:设置背景色 4.下列哪一项是CSS 正确的语法(C ) A、 body: color=black B、 {body: color:black} C、 body{color:black} D、 {body:color=black} 5.Http协议的状态码(D)表示文件没有找到
A、200 B、400 C、 500 D、 404 6.Tomcat的端口号可以在(A )文件中修改 A. server.xml B. web.xml C. tomcat.xml D. 不能改 7.在一个表单里,想要用jquery找到指定元素的第一个元素用 ( )实现,第二个元素用( A)实现。 A、first,eq(1) B、first,equ(0) C、first,eq(0) D、fir,eq(1) 8.当一个Servlet首次被请求的时候,服务器首先会调用( D )方法 A、 doGet B、 doPost C、 doInit D、 init 9.在J2EE中,重定向到另一个页面,以下(C)语句是正确的 A、 request . sendRedirect(“http :// www . svse . com . cn”); B、 request . sendRedirect(); C、 response . sendRedirect(“http: // www . svse . com . cn”); D、 response .sendRedirect(); 10.在Servlet中,response.getWriter()返回的是( B ) A、 JspWriter对象 B、 PrintWriter对象 C、 Out对象 D、 ResponseWriter对象 11.Login.jsp为登录页面,表单代码如下:
2、将规则下载初始化js中 $().ready(function() { $("#signupForm").validate({ rules: { firstname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: { firstname: "请输入姓名", email: {1、静态Web和动态Web的区别? 静态Web与动态Web最本质的区别是静态Web是无法进行数据库操作,而动态Web是可以进行数据库操作的。 动态Web的最大特点就是具有交互性,所谓交互性就是服务器端会自动根据用户请求的不同而显示不同的结果。 2、说一说你了解的动态Web技术有哪些? CGI、PHP、ASP、https://www.doczj.com/doc/477085224.html, JSP 3、什么是Servlet? Servlet是运行于服务器端的,按照其自身规范编写的Java应用程序。 1、Servlet是用Java语言编写的,它是一个Java类。因而Servelet遵守所有Java语 言的语法规则,并且它可以调用一般Java程序可以调用的JDK类库。 2、Servlet是在服务器端运行的。它编译后的".class"文件被服务器端调用和执行。 Web服务器使用该class文件去处理浏览器请求,并将处理的结果返回到客户端。 3、由于Servlet特殊的应用特点,它有自身特殊的规则。一般来说,它必须调用Java Servlet API,必须是对特定类或接口的继承和实现。并且,它必须重写特定的方法去处理客户端请求。 4、Servlet的主要功能有哪些? Servlet的主要功能是用来接受、处理客户端请求,并把处理结果返回到客户端显示。 其过程如下: 1、客户端把请求送到Servlet处理 2、Servlet处理请求。这时Servlet相应的方法被Web服务器调用去处理请求。这个 过程中,Servlet可以和服务器端的其他资源(文件、数据库等)交互。 3、Servlet把请求的结果返回。在这个过程中,Servlet返回的并不仅仅是数据结果, 而是整个HTML文件。 5、Servet的生命周期? 生命周期包括加载(创建)程序、初始化、服务、终止(销毁)、卸载5个部分。 6、谈一谈请求转发和重定向的区别? 7、什么是HTTP协议? HTTP(Hypertext Transfer Protocol)中文“超文本传输协议”,是一种为分布式,合作式,多媒体信息系统服务,面向应用层的协议,是Internet上目前使用最广泛的应用层协议,它基于传输层的TCP协议进行通信,HTTP协议是通用的、无状态的协议。 8、HTTP协议的主要特点有哪些? 遵循请求/响应模型、无连接、无状态、简单快速、灵活 9、HTTP协议请求由哪几部分组成? 请求行、消息报头、请求正文 10、HTTP协议响应由哪几部分组成? 状态行、消息报头、响应正文 11、HTTP协议中请求方法的GET和POST的区别?
jQuery formValidator使用说明 说明:jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js 脚本于页面的分离。对一个表单对象,你只需要写一行代码就可以轻松实现20种以上的脚本控制。现支持一个表单元素累加很多种校验方式,采用配置信息的思想,而不是把信息写在表单元素上,能比较完美的实现ajax请求。并结合jquery.boxy实现遮罩提示。 一、所需元素 jquery-1.3.2.js (需要jquery-1.3.2以上版本) formValidator.js (表单验证基础js) formValidatorRegex.js (表单验证所需正则js) jquery.boxy.js (遮罩提示js) validator.css (表单验证样式) boxy.css (遮罩提示样式) 二、使用说明 a)使用方法 i.加载所需js和css文件 ii.初始化验证控件 ($.formValidator.initConfig({formid:"form1",onerror:functi on(msg){Boxy.alert("
jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)脚本控制。目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、ajaxValidator(通过ajax到服务器上做数据校验)、regexValidator(提供可扩展的正则表达式库)、functionValidator (可使用外部函数来做校验) 本插件于其他校验控件最大的区别有3点: 1、校验功能可以扩展。 对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制,别的表单校验控件是代码里写死的,而formValidator是通过外部js文件来扩展的,你可以通过写正则表达式和函数来无限的扩展这些功能。 2、实现了校验代码于html代码的完全分离。 你的所有信息都无需配置在校验表单元素上,你只要在js上配置你的信息。使美工(界面)和javascript工程师的工作不交织在一起 3、你只需写一行代码就能完成一个表单元素的所有校验。你只需要写一行代码就能完成一下所有的控制 ?支持所有类型客户端控件的校验 ?支持jQuery所有的选择器语法,只要控件有唯一ID和type属性 ?支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。 ?支持2种校验模式。第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式) ?支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。 ?支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。 ?支持自动构建提示层。可以进行精确的定位。 ?支持自定义错误提示信息。
JQuery笔记-表单验证大全
jquery.validate.js 是 jquery 旗下的一个验证插件,借助 jquery 的优势,我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。 举个例子,有这么一个表单: view plaincopy to clipboardprint?