zoukankan      html  css  js  c++  java
  • JQuery插件validate的Remote使用

      JQuery.validate.js 在表单验证中经常使用,初学,对于其中Remote的使用说明一下.

    1. 基本解释

        JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法,JQuery.validate.js是对JQuery的一个插件,可以认为是对JQuery在某个特殊场景下的扩展,而Validate就是对表单验证提供的扩展。

    2. 场景解释

        用户进行注册用户的时候,要异步的判断用户名是否存在,给出提示信息。

    3. 通过案例学习

          Html和JavaScript结合的脚本.

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 
      4 <head>
      5     <script src="../includes/libraries/javascript/jquery.js" type="text/javascript" charset="utf-8" ></script>
      6     <script src="../includes/libraries/javascript/jquery.plugins/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
      7         
      8     <script type="text/javascript">
      9         $().ready(function() {
     10             $("#signupForm").validate({
     11             
     12                 debug: false,
     13                 onkeyup:false,
     14                 /*忽略某些元素不做验证*/
     15                 //ignore: ".ignore",
     16                 
     17                 /*  更改错误信息显示的位置
     18                     Default:
     19                     errorPlacement: function(error, element) {  
     20                         error.appendTo(element.parent());  
     21                     }    
     22                     error.appendTo(element.parent());
     23                 */
     24                 /*
     25                 submitHandle: function(form){
     26                         alert("submited!");
     27                         form.submit();},
     28                 */
     29                 rules: {
     30                     /*
     31                     firstname: { 
     32                         required: function(){ return true;}},
     33                     */
     34                     
     35                     firstname: {
     36                         required: true,
     37                         remote: {
     38                             url: "Learn.php",
     39                             type: "post",
     40                             //DataType: "json",
     41                             data: {
     42                                 firstname: function(){
     43                                     return $("#firstname").val();
     44                                 }
     45                             }}},
     46                         
     47                     phonenum: {
     48                         required: true,
     49                         digits: true,
     50                         rangelength: [11,11]},
     51                         
     52                     email: {
     53                         required: true,
     54                         email: true},
     55                     
     56                    password: {
     57                         required: true,
     58                         minlength: 5},
     59                         
     60                    confirm_password: {
     61                         required: true,
     62                         minlength: 5,
     63                         equalTo: "#password"}
     64                 },
     65                 
     66                 messages: {
     67                     firstname: {
     68                         required: "请输入姓名",
     69                         remote: "请输入姓名,remote"},
     70                     
     71                     phonenum: {
     72                         required: "请输入手机号",
     73                         digits: "存在字符,非法手机号",
     74                         rangelength: "手机号位数不对"},
     75                         
     76                     email: {
     77                         required: "请输入Email地址",
     78                         email: "请输入正确的email地址"},
     79                     
     80                     password: {
     81                         required: "请输入密码",
     82                         minlength: jQuery.format("密码不能小于{0}个字 符")},
     83                         
     84                     confirm_password: {
     85                         required: "请输入确认密码",
     86                         minlength: "确认密码不能小于5个字符",
     87                         equalTo: "两次输入密码不一致不一致"}
     88                 },
     89                 
     90                 submitHandler: function(form){
     91                         alert("验证通过");}    
     92         
     93             });
     94         });            
     95     </script>
     96 
     97 </head>
     98 
     99 <body>
    100     
    101 
    102     <form id="signupForm" method="post" action="">
    103         <p>
    104             <label for="firstname">姓氏</label>
    105             <input id="firstname" name="firstname" />
    106         </p>
    107         
    108         <p>
    109             <label for="phonenum">手机</label>
    110             <input id="phonenum" name="phonenum" />
    111         </p>
    112         
    113         <p>
    114             <label for="email">邮件</label>
    115             <input id="email" name="email"  />
    116         </p>
    117      
    118         <p>
    119             <label for="password">密码</label>
    120             <input id="password" name="password" type="password"  />
    121         </p>
    122       
    123         <p>
    124             <label for="confirm_password">确认密码</label>
    125             <input id="confirm_password" name="confirm_password" type="password"  />
    126         </p>
    127         
    128         <p>
    129             <input class="submit" type="submit" value="提交"/>
    130         </p>
    131         
    132     </form>
    133 </body>
    134 </html>

         

         后台PHP代码 BaseFunction.php

    <?php
    
        function WriteLog($msg)
        {
            $filename = dirname(__FILE__) ."\Debug.log";
            $handler = null;
    
            if (($handler = fopen($filename, 'ab+')) !== false)
            {
                fwrite($handler, "
    ".'['.date('Y-m-d H:i:s').']'."	".$msg);
                fclose($handler);
            }
        }
    
    
        function CheckUser($UserName) {        
            if( $_REQUEST[$UserName] == 'php' ){
                exit("false");
            }
            else{
                exit("true");
            }
        }
    ?>

      后台PHP代码 Learn.php

    <?php
    
        require("BaseFunction.php");
        CheckUser('firstname');
    ?>
  • 相关阅读:
    CSS大杂烩(1)
    菜鸟快飞之JavaScript函数
    mysqldump主要参数分析
    PXC原理分析
    MHA原理分析
    android数据存储之外部存储(External Storage)
    JsonWriter使用
    基于asp.net mvc的近乎产品开发培训课程(第二讲)
    基于asp.net mvc的近乎产品开发培训课程(第一讲)
    MVC的注意事项及开发技巧
  • 原文地址:https://www.cnblogs.com/wildfox/p/5491811.html
Copyright © 2011-2022 走看看