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

复制代码 代码如下:

       <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>  

时间: 2024-10-27 01:52:42

jQuery ui插件的使用方法代码实例_jquery的相关文章

jQuery中ajax的get()方法用法实例_jquery

本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri

jQuery中ajax的load()方法用法实例_jquery

本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素.语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.c

jQuery验证插件validate使用方法详解_jquery

1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页

jquery简单插件制作(fn.extend)完整实例_jquery

本文实例讲述了jquery简单插件制作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&qu

Jquery中find与each方法用法实例_jquery

本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id") $(this) $(element) 等等,只要灵活运用,就能爆发出强大的可造型. 但是在实际使用中,仍然觉得有些不足. 如果想要在某个元素下寻找特定的元素,仅仅依靠上面这个方法,就必须对 $("

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

 这篇文章主要介绍了jQuery UI插件自定义confirm确认框的方法,实例分析了jQuery的UI插件使用技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. ht

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

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

JQuery选中checkbox方法代码实例

  这篇文章主要介绍了JQuery选中checkbox方法代码实例(全选.反选.全不选),本文直接给出代码实例,需要的朋友可以参考下 1.checkbox list选择 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

jquery ui插件实现漂亮弹出对话框方法

关于jquery ui插件简单介绍 jquery ui 是以 jquery 为基础的开源 网页特效 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件. 用户交互组件 包括draggable 拖动.droppable 放置.resizable 缩放.selectable 复选.sortable 排序. 可视控件 包括accordion 折叠面板.datepicker 日期选择.dialog 对话框.progressbar 进度条.slider 滑块.tabs 标签页. 动画.