validate插件的使用举例

一个表单验证。

validate.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>注册用户</title>
    <script src="jquery-1.8.3.js">
    </script>
    <script src="jquery.validate.min.js">
    </script>
    <script>
      $().ready(function() {
        $("#signupForm").validate({
          rules:{
            /*验证的规则*/
            username:{
              required:true, minlength:6, remote:{
                /*ajax局部页面刷新验证*/
                url:"doAction.php?act=ajax", type: "post", dataType: "json",function(){
                  return $("#username").val();
                }
              }
            }
            , tel:{
              required:true, minlength:11, checkTEL:true
            }
          }
          , messages:{
            username:{
              required:"请填写用户名", minlength:"用户名长度至少为6个字符"
            }
            , tel:{
              required:"请填写电话号码", minlength:"电话号码长度至少为11位"
            }
          }
        });
        //validate 验证 验证器——————自定义函数
        $.validator.addMethod("checkTEL",function(value,element,params){
          var checkTel = /^1[3|4|5|7|8][0-9]\d{
            4,8}
            $/;
            return this.optional(element)||(checkTel.test(value));
          }
          ,"请输入正确的手机号码！电话号码为11位且以13,14,15,17,18开头");
        });
    </script>
    <style>
      .error {
        color:red;
        /*错误的颜色提示，.error是封装在validate中的*/
      }
      #main {
        width:500px;
        background: grey;
        margin:0 auto;
      }
    </style>
  </head>
  <body>
    <form class="cmxform" id="signupForm" method="post" action="doAction.php?act=add">
      <fieldset>
        <p>
          <label for="username">用户名</label>
          <input id="username" name="username" type="text">
        </p>
        <p>
          <label for="tel">tel</label>
          <input id="tel" name="tel" type="tel">
        </p>
        <p>
          <input class="submit" type="submit" value="提交">
        </p>
      </fieldset>
    </form>
  </div>
</body>
</html>

提交表单后由 doAction.php 处理。

<?php
header("content-type:text/html;
charset = utf8");
include "../../conf/config.php";
include "../../functions/mysql.func.php";
/*包含文件在上一篇博客中*/
connect(DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_CHARSET);
/*函数已经被封装，想要了解可以查看上一篇博客*/
$act = $_GET['act'];
switch ($act) {
  //ajax验证
  case 'ajax': $username = $_POST['username'];
  $sql = "select *from cms_user
  where username = '".$username."'";
  //后台输出只能是true和false
  if (mysql_fetch_assoc(mysql_query($sql))) {
    echo "false";
  }
  else {
    echo "true";
  }
  break;
  case 'login': /* 有一个东西记录登录的状态
   */
  $username = addslashes($_POST['username']);
  //mysql_real_escape_string()
  $password = md5($_POST['password']);
  $sql = "select *from cms_user
  where username = '$username' and password = '$password'";
  if ($row = mysql_fetch_assoc(mysql_query($sql))) {
    $time = time()+3600;
    setcookie('username', $username, $time, "/");
    setcookie('isLogin', 1, $time, "/");
    header("Location:index.php");
  }
  break;
  case 'add': //防止sql注入 包的发送工具fildder 抓包工具 //mysqli_real_escape_string() //addslashes() curl函数库 主动给post, get发送数据
  $username = addslashes($_POST['username']);
  $password = md5($_POST['password']);
  $email = addslashes($_POST['email']);
  $tel = addslashes($_POST['tel']);
  $addtime = time();
  $uptime = time();
  $sql = "insert cms_user (`username`,`password`,`email`,`tel`,`addtime`,`uptime`,`status`)
  values ('$username', '$password', '$email', '$tel', '$addtime', '$uptime', 0)";
  if (mysql_query($sql)) {
    header("Location:index.php");
  }
  else {
    header("Location:add.php");
  }
  break;
}

以上代码完成 Ajax 验证、登录和新增用户三个分支处理。

本文早期发布于个人 CSDN 博客：查看原文