zoukankan      html  css  js  c++  java
  • jquery验证前端页面

    一共三个页面

    1. jquery.html文件(前端页面,jquery验证用户信息)
    2. jquerytest.php文件(后台处理页面)
    3. jquerydb.php文件(数据库)

    数据表结构

    jquery.html

    jquery需要表单<form>把form里的值传到php文件;而ajax可以不用表单元素,可以通过url:"***.php“ type="post"传值
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <title>注册</title>
     5         <meta charset="UTF-8" />
     6         <!-- 引用的jquery文件   在谷歌浏览器中可以执行的jqery文件  ;这个可以直接使用,不用下载-->
     7         <script src="https://weui.io/zepto.min.js"></script>
     8         
     9         <!-- 引用的jquery文件  在ie浏览器中可以执行的jqery文件,我是下载到本地的-->
    10         <script src="jquery.min.js"></script>
    11         <!--
    12              jquery验证
    13          -->
    14         <script type="text/javascript">
    15             $(function() {
    16                 $('#form1').submit(function() {          //当提交表单时,会发生 submit 事件。该事件只适用于表单元素。submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。
    17 var username = $("#username").val(); //获取input的内容 18 var pass1 = $("#pass1").val(); 19 var pass2 = $("#pass2").val(); 20 if (username == "" || pass1 == "" || pass2 == "") { 21 alert("请填写完整"); 22 return false; 23 } 24 if (pass1 != pass2) { 25 alert("两次密码不一致"); 26 return false; 27 } 28 }); 29 }); 30 </script> 31 </head> 32 <body> 33 <form id="form1" action="jquerytest.php" method="post"> 34 <div> 35 <div> 36 <div> 37 <label>用户名</label> 38 </div> 39 <div> 40 <input id="username" type="text" placeholder="请输入用户名号" name="username"> 41 </div> 42 </div> 43 <div> 44 <div> 45 <label>密码</label> 46 </div> 47 <div> 48 <input type="password" id="pass1" value="" name="pass1"> 49 </div> 50 </div> 51 <div> 52 <div> 53 <label>确认密码</label> 54 </div> 55 <div> 56 <input type="password" value="" id="pass2" placeholder="" name="pass2"> 57 </div> 58 </div> 59 </div> 60 <div> 61 <input type="submit" name="sub" id="sub" value="注册" /> 62 </div> 63 </form> 64 </body> 65 </html>

    2 jquerytest.php

     1 <?php
     2 require ("jquerydb.php");//引入数据库处理文件
     3 $db = new Mysql("localhost", "root", "201122", "userdb");
     4 if (isset($_POST["sub"])) {
     5     
     6     //获取表单数据
     7     $username = $_POST["username"];
     8     $pass1 = $_POST["pass1"];
     9     $pass2 = $_POST["pass2"];
    10     define("TABLENAME", "user_zhuce");
    11     define("SEL", "where username='$username'");
    12     define("COLE", "(username,password,password2)");
    13     define("DATEE", "('$username','$pass1','$pass2')");
    14     //信息是否为空
    15     $db -> isnull($username, $pass1, $pass2);
    16     //密码是否一致
    17     $db -> issame($pass1, $pass2);
    18     if ($pass1 == $pass2) {
    19         //查询是否有相同的用户名
    20         $sel = $db -> select(TABLENAME, SEL);
    //查询有该用户名的数目
    21 $row = $db -> row($sel); 22 $r = $row[0]; 23 if ($r == 1) { 24 echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.alert" . "(" . "\"" . "该用户名已被注册" . "\"" . ")" . ";" . "</script>";26 exit ; 27 } 28 29 //插入用户信息 30 $insert = $db -> insert(TABLENAME, COLE, DATEE); 31 $sel = $db -> select(TABLENAME, SEL); 32 $row = $db -> row($sel); 33 $r = $row[0]; 34 if ($r == 1) { 35 echo "注册成功"; 36 } 37 38 $db -> dbClose(); 39 40 } 41 } 42 ?>

    3jquerydb.php

     1 <?php
     2 header("content-type:text/html;charset=utf-8");
     3 class Mysql {
     4     private $host;
     5     //服务器地址
     6     private $root;
     7     //用户名
     8     private $password;
     9     //密码
    10     private $database;
    11     //数据库名
    12 
    13     //通过构造函数初始化类
    14     function Mysql($host, $root, $password, $database) {
    15         $this -> host = $host;
    16         $this -> root = $root;
    17         $this -> password = $password;
    18         $this -> database = $database;
    19         $this -> connect();
    20     }
    21     //连接数据库函数
    22     function connect() {
    23         $this -> conn = mysql_connect($this -> host, $this -> root, $this -> password);
    24         mysql_select_db($this -> database, $this -> conn);
    25         mysql_query("set names utf8");
    26     }
    27     //关闭数据库
    28     function dbClose() {
    29         mysql_close($this -> conn);
    30     }
    31     //mysql_query函数
    32     function query($sql) {
    33         return mysql_query($sql);
    34     }
    35     
    36     function row($result) {
    37         return mysql_fetch_row($result);
    38 
    39     }
    40     //数目
    41     function select($tableName, $condition) {
    42         return $this -> query("SELECT COUNT(*) FROM $tableName $condition");
    43     }
    44     //选择语句
    45     function insert($tableName, $fields, $value) {
    46         $this -> query("INSERT INTO $tableName $fields VALUES$value");
    47     }
    48     //判断用户名,密码,确认密码是否为空
    49     function isnull($input1,$input2,$input3){
    50         if($input1==""||$input2==""||$input3==""){
    51             echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."请填写完整(php)!"."\"".")".";"."</script>";
    52            
    53         }
    54     }
    55     //判断两次的密码是否一致
    56     function issame($password1,$password2){
    57         if($password1!=$password2){
    58             echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."两次密码不一致!(php)"."\"".")".";"."</script>";  
    59            
    60         }
    61     }
    62 
    63 }
    64 
    65 
    66 ?>
  • 相关阅读:
    Python—re模块
    Python—json模块
    Python—sys模块介绍
    Python—os模块介绍
    Python—randonm模块介绍
    Python—time模块介绍
    Python—包介绍
    Python—模块介绍
    Python—装饰器
    jvm、jre、jdk
  • 原文地址:https://www.cnblogs.com/tanyongli/p/7344770.html
Copyright © 2011-2022 走看看