jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件
1，jQuery特别容易扩展，开发者可以基于jQuery开发一些扩展动能
2，插件:http://plugins.jquery.com
3，超厉害的插件：validation 、 pickadate、 Echarts、chosen、（编辑器插件） ckeditor在百度上都可以直接搜索
表单校验
jQuery插件validation：https://jqueryvalidation.org/
validation是一个基于jQuery的插件，里面有了jQuery的一些函数和功能
使用validation插件实现表单验证
初始时点击注册的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script> </head>
<body>
<form id="registerForm">
<table border="1" width="800px" height="500px" >
<tr><td colspan="2" align="center" >注册 </td></tr>
<tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>
<tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>
<tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>
<tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>
<tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
<tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女 <label for="sex" class="error"></label>
</td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="注册"/> </td></tr> </table>
</form>
</body>
</html>
未使用插件时.html
使用了插件并书写了校验规则：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.min.js"></script> <script>
var validateRule={
rules:{
username:{
required:true,//必填
minlength:3,
maxlength:6
},
email:{
required:true,
email:true
},
password:{
required:true,
minlength:3,
maxlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"//与名为password填的内容保持一致 },
birthday:{
date:true//填写的内容需与日期的格式内容保持一致
},
sex:{
required:true
} }, };
$(function(){
$("#registerForm").validate(validateRule);
}) </script> </head>
<body>
<form id="registerForm">
<table border="1" width="800px" height="500px" >
<tr><td colspan="2" align="center" >注册 </td></tr>
<tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>
<tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>
<tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>
<tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>
<tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
<tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女 </td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="注册"/> </td></tr> </table>
</form>
</body>
</html>
没有引入国际化的message.js文件.html
由于默认给出的是英文提示，所以我们也可以引入国际化的message.js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.min.js" ></script>
<script>
var validateRule={
rules:{
username:{
required:true,//必填
minlength:3,
maxlength:6
},
email:{
required:true,
email:true
},
password:{
required:true,
minlength:3,
maxlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"//与名为password填的内容保持一致 },
birthday:{
date:true//填写的内容需与日期的格式内容保持一致
},
sex:{
required:true
} }, };
$(function(){
$("#registerForm").validate(validateRule);
}) </script> </head>
<body>
<form id="registerForm">
<table border="1" width="800px" height="500px" >
<tr><td colspan="2" align="center" >注册 </td></tr>
<tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>
<tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>
<tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>
<tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>
<tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
<tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女 </td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="注册"/> </td></tr> </table>
</form>
</body>
</html>
引入了国际化的message.js文件.html
我们也可以自己自定义书写提示内容，在messages中进行书写
<script>
var validateRule={
rules:{
username:{
required:true,//必填
minlength:3,
maxlength:6
},
email:{
required:true,
email:true
},
password:{
required:true,
minlength:3,
maxlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"//与名为password填的内容保持一致 },
birthday:{
date:true//填写的内容需与日期的格式内容保持一致
},
sex:{
required:true
} },
messages:{
username:{
required:"这个是必须填写的哦！！",//必填
minlength:"最少得3个字符哦！！",
maxlength:"最多只能填6个字符哦！！"
},
sex:{
required:"性别必须的勾选哦！！！"
}
}
};
$(function(){
$("#registerForm").validate(validateRule);
}) </script>
从展示的效果图中我们可以看到性别的那一栏提示内容并没有意识提示在后面，而是在两个input标签之间，我们可以做这样的处理，就可以将提示内容展示在后面：
<tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
<label for="sex" class="error" style="display: none;"></label>
</td></tr>
最终的效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.min.js" ></script>
<script>
var validateRule={
rules:{
username:{
required:true,//必填
minlength:3,
maxlength:6
},
email:{
required:true,
email:true
},
password:{
required:true,
minlength:3,
maxlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"//与名为password填的内容保持一致 },
birthday:{
date:true//填写的内容需与日期的格式内容保持一致
},
sex:{
required:true
} },
messages:{
username:{
required:"这个是必须填写的哦！！",//必填
minlength:"最少得3个字符哦！！",
maxlength:"最多只能填6个字符哦！！"
},
sex:{
required:"性别必须的勾选哦！！！"
}
}
};
$(function(){
$("#registerForm").validate(validateRule);
}) </script> </head>
<body>
<form id="registerForm">
<table border="1" width="800px" height="500px" >
<tr><td colspan="2" align="center" >注册 </td></tr>
<tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>
<tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>
<tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>
<tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>
<tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
<tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
<label for="sex" class="error" style="display: none;"></label>
</td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="注册"/> </td></tr> </table>
</form>
</body>
</html>
最终代码.html
jQuery常用插件与jQuery使用validation插件实现表单验证实例的更多相关文章
- JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...
- jQuery同一标签多个相同事件 return语句 表单提交实例
如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件 如:$(':submit').click(); 则自定义的单击事件先执行,然后才是标签自带的单击事件(c ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件的基本使用方法及功能拓展
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...
- jquery 表单验证插件
其他: <form action=""> First name: <input type="text" name="FirstNam ...
- jQuery Validation Engine 表单验证
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
随机推荐
- jenkins集成sonar
用于我的sonar已经在一台机器上搭建好了,但是每次都要人工去执行sonar-run,很麻烦,所以就想着集成到jenkins上,在jenkins上点点按钮就可以看sonar结果,所以很抱歉,本博客不设 ...
- max_execution_time with sleep
Under Linux, sleeping time is ignored, but under Windows, it counts as execution time. Note The set_ ...
- cocos2d-x JS 富文本(为一段文本中的个别字体上颜色)
setWinText : function (levelStr1,levelStr2,levelStr3,color1,color2) { var imgRankingBG = this.contai ...
- cocos2d JS-(JavaScript) 检测DOM是否可用
function domReady(f) { if (domReady.done) {//如果已经加载完成 马上执行函数 return f(); } if (domReady.timer) {//如果 ...
- Vue开始
Vue搭建项目 搭建VUe项目之前需要先安装脚手架,不然项目搭建完会有警告. 最后稍等一定的时间,运行结果如下: 出现上述提示,是因为我们没有先安装vue-cli,接下来,我们安装vue-cli 安装 ...
- 输出调试技巧 PRINTF（）
#define PRINTF(...) \ do { \ printf( "%d:%s::",__LINE__, __FUNCTION__);\ printf(__VA_ARGS_ ...
- C#窗体控件DataGridView常用设置
在默认情况下,datagridview的显示效果: 1.禁用最后一行空白. 默认情况下,最后一行空白表示自动新增行,对于需要在控件中进行编辑,可以保留 ? 1 dataGridView1.AllowU ...
- WebApi关于配置全局返回Json数据格式时间以及命名小写
1.直接在Global文件中配置: 1 var formatters = GlobalConfiguration.Configuration.Formatters; 2 var jsonFormatt ...
- springboot之session、cookie
1- 获取session的方案 session: https://blog.csdn.net/yiifaa/article/details/77542208 2- session什么时候创建? ...
- UML之状态机图
状态机图 基本概念: 状态机图,UML 1.x规范中称状态图,是一个展示状态机的图. 状态机图基本上就是一个状态机中元素的投影,这也就意味着状态机图包括状态机的所有特征.状态机图显示了一个对象如何根据 ...