学习使用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 相关文章推荐
国外的为初学者写的JavaScript教程
Jun 09 Javascript
DOM下的节点属性和操作小结
May 14 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
php初始化对象和析构函数的简单实例
2014/03/11 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python list操作用法总结
2015/11/10 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
python打包生成so文件的实现
2020/10/30 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
详解Python中的文件操作
2021/01/14 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
Ruby如何定义一个类
2012/10/08 面试题
营业经理岗位职责
2013/11/10 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
企业给企业的表扬信
2014/01/13 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
辩论赛主持词
2014/03/18 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
好的促销活动方案
2014/08/21 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
委托函范文
2015/01/29 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
python基础之停用词过滤详解
2021/04/21 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android