一.jQuery Validate验证框架

1.引入相关插件路径

在https://www.runoob.com/jquery/jquery-plugin-validate.html里引入相关插件路径

 <!--引入jQuery库--><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script><!--前端验证插件--><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><!--默认的验证错误信息显示内容(中文)--><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

2. 修改一些规则

 <script>$(function (){$("#myform01").validate({/*设置KEY必须是name属性对应的值*///设置校验规则rules: {account: {required: true,//字段必须填写minlength: 5,//字段最小长度为5maxlength: 10,//字段最大长度为10},},//修改提示信息messages:{account: {required: "账号不能为空",minlength: "你输入的字符小于5个",maxlength: "你输入的字符大于10个",},},//修改触发验证方式onfocusout:false,//失去焦点时不验证onkeyup:false//按键时不验证});})</script>

3. 自定义验证规则

jQuery.validator.addMethod("validAccount", function(value, element) {let reg = /^[A-Za-z]\w+$/;return this.optional(element) || (reg.test(value));//验证}, "账号必须以字母开头");//提示信息

4.异步验证

servlet:

package com.yu.web;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;@WebServlet("/check/account")
public class AccountCheckServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String account = request.getParameter("username");List<String> list = new ArrayList<>();list.add("admin123");list.add("super123");list.add("love123");//设置响应回去的内容response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();if (list.contains(account)){out.print(false);}else{out.print(true);}out.close();}
}

  remote:{//异步验证url:"check/account",type:"get",dataType:"json",data:{username:function (){return $.trim(($("#myAccount").val()));},},}

整体代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>插件验证</title></head><body><form action="http://www.baidu.com" id="myform01">账号:<input type="text" id="myAccount" name="account" required autofocus>手机:<input type="text" id="myPhone" name="phone" required autofocus><input type="submit" value="自动提交"></form><!--引入jQuery库--><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script><!--前端验证插件--><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><!--默认的验证错误信息显示内容(中文)--><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script><script>$(function (){/*自定义验证规则*/jQuery.validator.addMethod("validAccount", function(value, element) {let reg = /^[A-Za-z]\w+$/;return this.optional(element) || (reg.test(value));//验证}, "账号必须以字母开头");//提示信息$("#myform01").validate({/*设置KEY必须是name属性对应的值*///设置校验规则rules: {account: {required: true,//字段必须填写minlength: 5,//字段最小长度为5maxlength: 10,//字段最大长度为10validAccount:true,//启动自定义的验证规则remote:{//异步验证url:"check/account",type:"get",dataType:"json",data:{username:function (){return $.trim(($("#myAccount").val()));},},}},},//修改提示信息messages:{account: {required: "账号不能为空",minlength: "你输入的字符小于5个",maxlength: "你输入的字符大于10个",remote:"该账号已经被注册"//异步验证提示信息},},//修改触发验证方式onfocusout:false,//失去焦点时不验证onkeyup:false,//按键时不验证submitHandler:function(form){alert("阻塞作用:可以在提交之前还能做一些事情");//比如return false不使用表单提交//手动设置Ajax提交数据return true;//不能设置false,会阻止提交默认行为}});})</script></body>
</html>

二.layer弹出层

1.引入相关插件路径

学习网址:https://layer.layui.com/

 <script src="resources/jquery-1.12.4.min.js"></script><script src="resources/layer/layer.js"></script>

2.警告窗口

 $("#btn1").click(function () {/*支持内容中写代码等等*/layer.alert("一叶<strong>遮天</strong>", {//内容,属性,点击yes后触发的行为title: "我是一个小小的警告窗口",//设置标题area: ["500px", "300px"],//设置弹出框大小icon: 3,//设置图标shade: 0.5,//设置遮罩阴影程度(默认值为0.3)closeBtn: 0,//设置关闭键btnAlign: "c",//按钮居中(默认右对齐)time: 3000,//设置三秒后关闭})});

3.询问窗口

$("#btn2").click(function () {/*支持内容中写代码等等*/layer.confirm("目光<strong style=\"color:pink;\">灼灼</strong>", {//内容,属性,点击yes后触发的行为title: "我是一个淡淡的询问窗口",//设置标题btn: ['只因你', '风华绝代', '你好美'],area: ["500px", "300px"],//设置弹出框大小icon: 3,//设置图标shade: 0.5,//设置遮罩阴影程度(默认值为0.3)closeBtn: 0,//设置关闭键btnAlign: "c",//按钮居中(默认右对齐)}, function (index) {console.log(this, index);layer.close(index);//点击后使弹窗关闭});});

提示窗口

$("#btn3").click(function () {/*支持内容中写代码等等*/layer.msg("目光<strong style=\"color:pink;\">灼灼</strong>");//默认几秒后自动关闭});

4.iframe窗口(加载页面)(重要)

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><a href="javascript:;" id="btn1">警告窗口</a><br/><a href="javascript:;" id="btn2">询问窗口</a><br/><a href="javascript:;" id="btn3">提示窗口</a><br/><a href="javascript:;" id="btn4">iframe窗口-加载页面(重要)</a><br/><script src="resources/jquery-1.12.4.min.js"></script><script src="resources/layer/layer.js"></script><script>$(function (){$("#btn1").click(function (){/*支持内容中写代码等等*/layer.alert("一叶<strong>遮天</strong>",{//内容,属性,点击yes后触发的行为title : "我是一个小小的警告窗口",//设置标题area : ["500px","300px"],//设置弹出框大小icon :3,//设置图标shade : 0.5,//设置遮罩阴影程度(默认值为0.3)closeBtn : 0,//设置关闭键btnAlign : "c",//按钮居中(默认右对齐)time : 3000,//设置三秒后关闭})});$("#btn2").click(function (){/*支持内容中写代码等等*/layer.confirm("目光<strong style=\"color:pink;\">灼灼</strong>",{title : "我是一个淡淡的询问窗口",btn : ['只因你','风华绝代','你好美'],//设置按钮内容area : ["500px","300px"],icon :3,shade : 0.5,closeBtn : 0,btnAlign : "c",//按钮居中(默认右对齐)},function (index){console.log(this,index);layer.close(index);//点击后使弹窗关闭});});$("#btn3").click(function (){layer.msg()("目光<strong style=\"color:pink;\">灼灼</strong>");});$("#btn4").click(function (){layer.open({title : "页面加载",type : 2,//2代表iframe层area : ['600px','500px'],maxmain : true,//支持最大最小框content : "check/account",//当type=2时,内容来源设置完整路径end: function(index, layero){if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭layer.close(index)}return false;}});});});</script></body>
</html>

JavaScript学习笔记(九）(验证框架,layer弹出层)相关推荐

学习使用layer弹出层关闭问题
学习使用layer弹出层关闭问题 //当你想关闭当前页的某个层时 var index = layer.open(); var index = layer.alert(); var index = la ...
layui内置模块（layer弹出层）
前面我们已经对layui前端框架的页面元素进行了简单的学习,但是作为一个可用的程序,仅仅是长的好看,并没有那个什么用:在好看的同时还需要实用和酷炫,实用就需要实现我们方便的和后端进行数据交互,酷炫就是 ...
layer弹出层闪退_jQuery使用Layer弹出层插件闪退问题
一.前言巨坑,基础没学好,导致找了一个下午的问题,终于被我发现了.说多都是泪,记录下来,以后有人遇到这个错误可以参考下做项目期间做了几个页面,需要用到弹出层,为了方便使用到了Layer的插件,然后 ...
layer弹出层扩展自定义样式
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 官网 http://layer.layui.com/ l ...
php layer弹出层更改背景,详解Layer弹出层样式
前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...
Layer 弹出层组件
Layer 弹出层组件一.Layer是什么? 用于实现网页中的各种弹出层交互, 如 Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab ...
layer弹出层闪退_layer弹出层详解
1.layer 弹出层iframe页面关闭自身 function closeFrame() { var index = parent.layer.getFrameIndex(window.name); ...
html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
layer文件ajax上传,layer弹出层数据传输到content里面
在项目中使用layer弹出层的时候,遇到一个问题,就是利用ajax请求后台数据成功时,调用layer弹出层(iframe),如何把数据传到iframe里面去? 经过百度,发现,使用js把数据拼接起来, ...

JavaScript学习笔记(九）(验证框架,layer弹出层)

JavaScript学习笔记(九）

一.jQuery Validate验证框架

1.引入相关插件路径

2. 修改一些规则

3. 自定义验证规则

4.异步验证

整体代码

二.layer弹出层

1.引入相关插件路径

2.警告窗口

3.询问窗口

提示窗口

4.iframe窗口(加载页面)(重要)

JavaScript学习笔记(九）(验证框架,layer弹出层)相关推荐

最新文章

热门文章