jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox
使用时需要向页面引入两个css文件如下:
<link rel="stylesheet" href="css/icon.css">
<link rel="stylesheet" href="css/easyui.css">
还需要引入三个外部js库
<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
//这是中文简体语言包
<script src="js/easyui-lang-zh_CN.js" type="text/javascript"></script>
validatebox表单验证实例
$(function () {
$("#name").validatebox({
required:true,
validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],
missingMessage:"请输入用户名"
})
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules,{
//验证用户名的格式
checkUser:{
validator:function (value, param) {
return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)
},
message:"6~18个字符，可使用字母、数字、下划线，需以字母开头"
},
})
//easyui表单提交的控制
$('#loginForm').form({
onSubmit:function(){
return $(this).form('validate');
},
success:function(){
$.messager.alert('Info', "恭喜您,注册成功!");
}
});
})
validate表单验证
需要引入两个外部js库
<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js"></script>
validate表单验证实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>验证框架的使用</title> <style type="text/css">
.error{
color: red;
}
</style>
</head>
<body>
<form action="success.html" method="post" id="myForm">
用户名：<input name="userName"> <br/>
密码：<input name="password" type="password" id="pwd"> <br/>
确认密码：<input name="repPassword"type="password" > <br/>
邮箱：<input name="email"> <br/>
手机号：<input name="phone"> <br/>
性别：<input name="sex" type="radio" value="男" checked>男
<input name="sex" type="radio" value="女">女<br/>
是否同意协议<input type="checkbox" name="context"><br/>
<button type="submit">注册</button>
</form> <!--引入需要的js库-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
//form表单的验证事件
$("#myForm").validate({
//验证规则 需要对哪些元素做验证
rules:{
userName:{
required:true
},
password:{
required:true,
minlength:6,
maxlength:10
},
repPassword:{
required:true,
minlength:6,
maxlength:10,
equalTo:"#pwd"
},
email:{
required:true,
email:true
},
phone:{
required:true,
checkPhone:true //自己书写的手机验证正则
},
context:{
required:true
}
}, //rules end
//不符合验证规则的错误信息
messages:{
userName:{
required:"请输入用户名"
},
password:{
required:"请输入密码",
minlength:"密码长度不能少于6位",
maxlength:"密码长度不能大于10位"
},
repPassword:{
required:"请输入密码",
minlength:"密码长度不能少于6位",
maxlength:"密码长度不能大于10位",
equalTo:"两次密码输入不一致"
},
email:{
required:"请输入邮箱",
email:"邮箱格式不正确"
},
phone:{
required:"请输入手机号",
checkPhone:"电话号码格式不正确"//自己书写的手机验证正则
},
context:{
required:"您没有同意协议"
}
}, // messages end
//鼠标失去焦点立即验证
onfocusout:function(element){
$(element).valid();
}
}); // end validate
//增加了手机验证正则
jQuery.validator.addMethod("checkPhone",function(value,element){
var tel = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
return this.optional(element) || (tel.test(value));
},"电话号码格式不正确")
})
</script> </body>
</html>
$(function () {
$("#name").validatebox({
required:true,
validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],
missingMessage:"请输入用户名"
})
$("#phone").validatebox({
required:true,
validType:['userTel'],
missingMessage:"请输入电话号码"
})
$("#userPwd").validatebox({
required:true,
validType:['minlength[6]','maxlength[16]'],
missingMessage:"请输入密码"
})
$("#userePwd").validatebox({
required:true,
validType:['minlength[6]','maxlength[16]','checkPass','equalTo["#userPwd"]'],
missingMessage:"请再次输入密码"
})
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules,{
//验证用户名的格式
checkUser:{
validator:function (value, param) {
return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)
},
message:"6~18个字符，可使用字母、数字、下划线，需以字母开头"
},
//验证用户名的长度
minlengthUser:{
validator:function(value,param){
return value.length>=param[];
},
message:"用户名长度至少为{0}位"
},
maxlengthUser:{
validator:function(value,param){
return value.length<param[];
},
message:"用户名长度必须小于{0}位"
},
//验证密码最小长度
minlength:{
validator:function(value,param){
return value.length>=param[];
},
message:"密码长度至少为{0}位"
},
//验证密码最大长度
maxlength:{
validator:function(value,param){
return value.length<param[];
},
message:"密码长度必须小于{0}位"
},
//验证两次密码是否一致
equalTo: {
validator: function (value, param){
return $(param[]).val() == value;
},
message: "两次输入密码不匹配"
},
//验证手机号
userTel: {
validator: function (value, param) {
return /^1[3|4|5|8|9][0-9]{9}$/.test(value);
},
message: "手机号码格式不正确"
}
})
//easyui表单提交的控制
$('#loginForm').form({
onSubmit:function(){
return $(this).form('validate');
},
success:function(){
$.messager.alert('Info', "恭喜您,注册成功!");
}
});
jQuery-easyui和validate表单验证实例的更多相关文章
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- 【干货】Laravel --Validate (表单验证) 使用实例
前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- 第二百二十一节，jQuery EasyUI，Form(表单)组件
jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...
- jquery-4 完整表单验证实例
jquery-4 完整表单验证实例 一.总结 一句话总结:在form的jquery对象中返回false即可终止表单提交. 1.验证的显示错误消息如何布局? 开始时隐藏,出现错误后显示 10 .erro ...
- validate表单验证-单独验证
今天编写一个表单验证程序,我来说一下今天遇到的坑:程序不是通过submit按钮提交验证的,是在自己写的一个方法中提交的,出现了表单无法验证的情况.然后我就了解了一下jquery validate的验证 ...
- Bootstrap+PHP表单验证实例
简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...
随机推荐
- elk安装最佳实践
一.添加清华源 .x.repo<<EOF [elasticsearch-.x] name=Elasticsearch repository .x packages baseurl=http ...
- HAProxy+keepalived+MySQL 实现MHA中slave集群负载均衡的高可用
HAProxy+keepalived+MySQL实现MHA中slave集群的负载均衡的高可用 Ip地址划分: 240 mysql_b2 242 mysql_b1 247 haprox ...
- html5 简介
html5基于html.html dom.xhtml的新版本. 为html5建立的一些新规则: 基于html.dom.xhtml和javascript: 减少对外部插件的需求,比如flash: 更多取 ...
- 【Sublime Text3】Package Control：Install Package不能使用解决方法
官网地址 https://packagecontrol.io/installation 报错内容 解决方法 https://packagecontrol.io/docs/troubleshoo ...
- Fail2ban 配置
本例为wordpress管理员登陆限制安装rpm -Uvh http://download.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.n ...
- 说 AppbarLayout,如何理解可折叠 Toolbar 的定制
Material Design 是个好东西,它的出现使得 Android 也能定制高颜值的界面,并且指导了如果实现复杂炫丽的交互效果,而 android Surpport Desgin 这个支持包就是 ...
- Leetcode 283.移动零 By Python
思路 我们可以用python的list comprehension来取出所以非0的元素,而且这样取出来会保持原有的相对顺序,再统计先后变化的长度,补上相应的0即可 代码 class Solution( ...
- 学习Spring Boot：（二十三）Spring Boot 中使用 Docker
前言 简单的学习下怎么在 Spring Boot 中使用 Docker 进行构建,发布一个镜像,现在我们通过远程的 docker api 构建镜像,运行容器,发布镜像等操作. 这里只介绍两种方式: 远 ...
- UVALive - 6439（思维题）
题目链接:https://vjudge.net/contest/241341#problem/F 题目大意:给你一个字符串,你可以用任意单个字符代替其中的一个子串,使它形成一个回文串,要求形成的回文串 ...
- RocketMQ介绍与云服务器安装
RocketMQ 介绍与概念 在github上的说法来看: Apache RocketMQ是一个分布式消息传递和流媒体平台,具有低延迟,高性能和可靠性,万亿级容量和灵活的可扩展性.它提供了多种功能: ...