index.jsp 页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>对话框</title> <!-- easyui 主题样式 --> <link rel="stylesheet" href="themes/icon.css" type="text/css" /> <link rel="stylesheet" href="themes/default/easyui.css" type="text/css" /> <!-- jQuery --> <script type="text/javascript" src="js/jquery.min.js"></script> <!-- easy ui --> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <!-- 本地化 --> <script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function(){ //默认邮箱验证 $("#email").validatebox({ required:true, validType:'email', missingMessage:'邮箱不能为空', }); //自定义长度验证 $("#uname").validatebox({ required:true, missingMessage:'用户名不能为空', validType:'minLeght[2]' }); //电话号码验证 $("#phone").validatebox({ validType:'mobile' }); //日历控件 $("#birth").datebox(); //表单提交 $("#userInfo").form({ url:"server.jsp", onSubmit:function(){ if($("#userInfo").form("validate")==false){ $.messager.alert("表单","表单输入有误,请检查再提交!","warning"); return false; } }, success:function(data){ alert(data); } }); //自定义验证规则 $.extend($.fn.validatebox.defaults.rules,{ //最小长度 minLeght:{ //验证规则 validator:function(value,param){ return value.length>=param[0]; }, //报错信息 message:'不能小于{0}个字符.' }, //手机号 mobile:{ validator:function(value){ return /^1[0-9]{10}$/i.test($.trim(value)); }, message:'手机号码格式错误' } }); }); </script> </head> <body> <form id="userInfo" method="post"> 姓名:<input type="text" id="uname" name="uname"/><br/> 邮箱:<input type="text" id="email" name="email"/><br/> 电话:<input type="text" id="phone" name="phone"/><br/> 生日:<input type="text" id="birth" name="birth"/><br/> <input type="submit" value="提交" id="btnSubmit"/> </form> </body> </html>
server.jsp 页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% request.setCharacterEncoding("utf-8"); out.print(request.getParameter("uname")); out.print("表单提交成功"); %>
效果图:
相关推荐
ValidateBox 验证框 Combo 组合 ComboBox 组合框 ComboTree 组合树 ComboGrid 组合表格 NumberBox 数字框 DateBox 日期框 DateTimeBox 日期时间框 Calendar 日历 Spinner 微调器 NumberSpinner 数值微调器...
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下。
主要介绍了jQuery插件EasyUI校验规则,主要介绍validatebox验证框,对validatebox进行校验规则扩展,使用jQuery EasyUI的朋友可以参考下。
validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。 2.练习...
input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options=" required:true, validType:['email','length[0,20]'] "> <...
验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email:匹配 email 正则表达式规则 url:匹配 URL 正则表达式规则 length[0,100]:允许从 x 到 y 个字符 remote[...
本文档中包含所有和EasyUI开发相关的内容,以及翻译制作的...tagbox:添加“required”属性,以允许用户将其用于验证指定值是否为空(译者注:该属性自validatebox继承而来,1.5.2版之前也有该属性只是设置以后无效)。
主要为大家详细介绍了Jquery Easyui自定义下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
ValidateBox 验证框 Combo 组合 ComboBox 组合框 ComboTree 组合树 ComboGrid 组合表格 NumberBox 数字框 DateBox 日期框 DateTimeBox 日期时间框 Calendar 日历 Spinner 微调器 NumberSpinner 数值微调器 ...
代码如下:<form id=”myForm” method=”post”> ”center” xss=removed> ”right”>命令: <td><input id=”cmd” name=”cmd” style=”width: 200px;” class=”easyui-validatebox” required=
7 ValidateBox(验证框) 18 7.1 实例 18 7.2 参数 20 7.3 方法 20 7.4 扩展 20 8 Pagination(分页) 20 8.1 实例 20 8.2 参数 22 8.3 事件 23 9 Window(窗口) 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 ...
7 ValidateBox(验证框) 18 7.1 实例 18 7.2 参数 20 7.3 方法 20 7.4 扩展 20 8 Pagination(分页) 20 8.1 实例 20 8.2 参数 22 8.3 事件 23 9 Window(窗口) 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 ...
7 ValidateBox(验证框) 18 7.1 实例 18 7.2 参数 20 7.3 方法 20 7.4 扩展 20 8 Pagination(分页) 20 8.1 实例 20 8.2 参数 22 8.3 事件 23 9 Window(窗口) 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 ...
input type=”text” id=”rate” name=”rate” required=”true” class=”easyui-validatebox” validType=”rateCheck[0,1000]” maxlength=”6″ /> $.extend($.fn.validatebox.defaults.rules, { CHS:...
validateBox验证,对其中的底层代码进行了一下修改封装
easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下 $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (value, param) { return /^[\u...
要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下:...