jQuery ui插件的使用方法代码实例

代码如下:

<script src="Jquery1.7.js" type="text/javascript"></script>
    <script src="jquery.validate.js" type="text/javascript"></script>
    <script src="messages_cn.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$('#form1').validate({
                rules: {
                    txtUser: { required: true, minlength: 6 },
                    txtPassword: { required: true, minlength: 6 },
                    txtConfirm: { required: true, minlength: 6, equalTo: "#password" },
                    txtHomePage: { required: true, url: true },
                    txtBirthday: { required: true, dateISO: true },
                    txtXueYa: { required: true, digits: true },
                    txtEmail: { required: true, email: true }
                },
                errorshow: function (error, element) {
                    error.appendTo(element.siblings('span'));
                }
            })
        })

</script>

</head>
<body>
    <form action="" id="form1">
         <table>
             <tr>
                <td>用户名：</td>
                <td><input name="txtUser" type="text" /><span>*</span> </td>
              </tr>

<tr>
                 <td>密码:</td>
                  <td><input name="txtPassword" id="password" type="text" /><span>*</span> </td>
              </tr>

<tr>
                 <td>确认密码：</td>
                  <td><input name="txtConfirm" type="text" /><span>*</span> </td>
              </tr>

<tr>
                   <td>主页：</td>
                    <td><input name="txtHomePage" type="text" /><span>*</span> </td>
              </tr>

<tr>
                <td>生日：</td>
                 <td><input name="txtBirthday" type="text" /><span>*</span> </td>
              </tr>

<tr>
                 <td>血压：</td>
                  <td><input name="txtXueYa" type="text" /><span>*</span> </td>
              </tr>

<tr>
                <td>邮箱：</td>
                <td><input name="txtEmail" type="text" /><span>*</span> </td>
              </tr>
         </table>

</form>
</body>
</html>

赞 (0)

相关推荐

  • jQuery UI插件自定义confirm确认框的方法

    本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

  • 基于jquery的blockui插件显示弹出层

    blockui可以在你发送ajax请求的时候,显示一个遮罩层禁止用户对页面进行操作并显示提示信息:或者用来显示一个登陆窗口,也可用来显示图片等. blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏,可以在blockUI方法中指定一些参数,来控制弹出层显示的内容,大小,位置等.blockUI方法的常用的参数有:message,css,overlayCSS,showOverlay. message:主要用来设置要显示的内容,可以直接设置为一段文字,html

  • jQuery EasyUI 开源插件套装 完全替代ExtJS

    jQuery EasyUI 开源插件套装 完全替代ExtJS

    前台开发,很多人喜欢用JQuery,但是在做后台管理系统,特别是企业管理系统,例如WEB进销存系统等,很多人都会选择ExtJS,因为ExtJS提供了非常多的UI界面,并且非常友好. 我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比: 上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~ 漂亮的消息弹出,支持遮罩效果. 这个效果也很酷~ 更多的酷炫功能请看下方功能列表... Easy UI的使用也非常地简单: 复制代码 代

  • Jquery插件easyUi表单验证提交(示例代码)

    复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

  • jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表.代码示例如下: 复制代码 代码如下: <script src="js/jquery-1.7.1.js"></script>   <script src="js/jquery-ui-1.8.18.custom.min.js"></script><link rel="stylesheet&qu

  • AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

    AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主

  • Jquery插件 easyUI属性汇总

    此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里. 属性分为CSS片段和JS片段. CSS类定义:1.div easyui-window        生成一个window窗口样式.      属性如下:                   1)modal:是否生成模态窗口.true[是] false[否]                   2)shadow:是否显示窗口阴影.true[显示] false[不显示] 2.div easyui-panel    

  • jQuery布局插件UI Layout简介及使用方法

    jQuery布局插件UI Layout简介及使用方法

    UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/.该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使用ExtJS的项目改造成jQuery项目.其核心是一个大小自适应的中心面板(必选),面板的上下左右四个方向可以放置可折叠.可缩放的面板(可选),各个面板可以添加任意数量的页眉和页脚面板.UI Layout支持内层布局的嵌套,任意块元素都可以当作布局的容器,最基本的布局容器是body. 基本使用方法:

  • jQuery ui插件的使用方法代码实例

    复制代码 代码如下: <script src="Jquery1.7.js" type="text/javascript"></script>     <script src="jquery.validate.js" type="text/javascript"></script>     <script src="messages_cn.js" type

  • Python csv模块使用方法代码实例

    这篇文章主要介绍了Python csv模块使用方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 import csv def openSCV(filename): with open("renting.csv",'r',encoding = 'utf_8_sig') as f: f_csv = csv.reader(f) for row in f_csv: print(row) def Test1(): headers =

  • java一个数据整理的方法代码实例

    这篇文章主要介绍了java一个数据整理的方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 import java.sql.*; public class Main { //本地数据库 // static final String JDBC_DRIVER = "com.mysql.jdbc.Driver"; // static final String DB_URL = "jdbc:mysql://127.0.0.1

  • java获取当前时间的四种方法代码实例

    这篇文章主要介绍了java获取当前时间的四种方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种:Date类 public class DateDemo { public static void main(String[] args) { Date day = new Date(); SimpleDateFormat dft = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); S

  • Python3常用内置方法代码实例

    这篇文章主要介绍了Python3常用内置方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 max()/min() 传入一个参数 (可迭代对象), 返回这个可迭代对象中最大的元素 可以设置default关键字参数, 当这个可迭代对象为空时, 返回default的值 传入多个参数, 返回这些参数中最大的参数 多个参数必须是同类型的 两种方法都可以设置key关键字参数(传入函数) """ max(iterable, *[

  • java合并list方法代码实例

    这篇文章主要介绍了java合并list方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 List包括List接口以及List接口的所有实现类.因为List接口实现了Collection接口,所以List接口拥有Collection接口提供的所有常用方法,又因为List是列表类型,所以List接口还提供了一些适合于自身的常用方法 方法一 List<Children> reduce = list.stream() .map(x ->

  • JavaScript遍历数组的方法代码实例

    这篇文章主要介绍了JavaScript遍历数组的方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 for循环 let arr=["A","B","C","D","E","F"]; for(let i=0;i<arr.length;i++){ console.log(arr[i]); } for...of 遍历出数组中的每

  • python各层级目录下import方法代码实例

    这篇文章主要介绍了python各层级目录下import方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 以前经常使用python2.现在很多东西都切换到了python3,发现很多东西还是存在一些差异化的.跨目录import是常用的一种方法,并且有不同的表现形式,新手很容易搞混.有必要这里做个总结,给大家科普一下: 1 同级目录下的调用: 同级目录下的调用比较简单,一般使用场景是不同类的相互调用.不用考虑路径问题,常用的格式是:from

  • Python class的继承方法代码实例

    这篇文章主要介绍了Python class的继承方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 class parent(object): def implicit(self): print("Parent implicit()") def override(self): print("Parent override()") def altered(self): print("Parent a

随机推荐