学习使用jQuery表单验证插件和日历插件


Posted in Javascript onFebruary 13, 2017

首先学习使用jQuery表单验证插件:

1.Jquery表单验证插件—Validation的学习与使用

(1)Validation的验证有几种规则,一是在class属性中定义验证规则,如class=“required”,minlength=”2”。为了实现将验证规则完全编写到class属性中,另外一种是通过引入新的jquery插件-jquery.metadata.js来实现验证规则的定义,此时表单的验证调用的方法改为如下所示的代码:
将$(“#form”).validate(),改为$(“#form”).validate({meta:”validate”}),写到class属性中的代码如下所示:

Class=”{validate:{required:true,minlength:2}}”

(2)为了实现行为与结构的完全分离,在编写代码中使用的是另外一种规则,通过使用name属性来关联字段和验证规则。使验证行为和HTML结构完全分离,实现代码如下:

Html中的代码:

<td><input type="text" name="ccarnumber" id="carnumber" /></td>

JS代码:

$("#order").validate({
  rules:{
   ccarnumber:{
    required:true,
    minlength:2,
   },
   ccarid:{
    required:true,
    carnumcheck: $("#carid").val(),
   },
   cusername:{
    required:true,

   },
   cuserphone:{
    required:true,
    carphonecheck: $("#userphone").val(),
   },
   ccarbalance:{
    required:true,
   },
  },

其中carnumcheck和carphonecheck为自定义验证函数,分别验证车牌号和联系方式。

(3)为了实现表单插件的中文化,需要引入该插件提供的中文库,jquery.validate.messages_cn.js

2.时间选择器插件的选择与使用学习

在编写代码中使用的是daterangepicker这款时间选择插件,该插件界面美好,且能够实现时间日期选择(双日历),使用插件的操作步骤描述如下。

(1) 首先需要引入js代码和CSS样式,带啊如下所示。

<script src="js/dist/moment.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="js/dist/daterangepicker.css" rel="external nofollow" >
<script type="text/javascript" src="js/dist/jquery.daterangepicker.min.js"></script>

(2) JS代码如下所示。下述代码表示的是两个输入文本框,选择开始和结束时间。DateRangePicker也有很多种日期的样式与表现方式

$('#two-inputs').dateRangePicker(
  {
  getValue: function()
  {
  if ($('#startTime').val() && $('#stopTime').val() )
return $('#startTime').val() + ' to ' + $('#stopTime').val();
  else
    return '';
  },
  setValue: function(s,s1,s2)
  {
   $('#startTime').val(s1);
   $('#stopTime').val(s2);
  }
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery遍历Form示例代码
Sep 03 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
js实现简单锁屏功能实例
May 27 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
js实现打地鼠小游戏
Feb 13 #Javascript
canvas实现钟表效果
Feb 13 #Javascript
深入理解Javascript箭头函数中的this
Feb 13 #Javascript
ES6学习之变量的解构赋值
Feb 12 #Javascript
AngularJS实现路由实例
Feb 12 #Javascript
jQuery文字轮播特效
Feb 12 #Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 #Javascript
You might like
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
如何获得PHP相关资料
2006/10/09 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
Yii框架登录流程分析
2014/12/03 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
JavaScript中的细节分析
2012/06/30 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
JS前端加密算法示例
2016/12/22 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
使用python+whoosh实现全文检索
2019/12/09 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
Python面试题集
2012/03/08 面试题
实习求职信
2013/12/01 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
机动车登记业务委托书
2014/10/08 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
Python数组变形的几种实现方法
2022/05/30 Python