javascript验证前端页面

Posted 讨厌麻烦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript验证前端页面相关的知识,希望对你有一定的参考价值。

 

 

1.html页面

<!DOCTYPE html>
<html>

    <head>

        <title>注册</title>
        <meta charset="UTF-8" />
        <!--
             js验证
         -->

        <script type="text/javascript">
function validate_required(filed, alerttxt) { with(filed) { if (value == null || value == "") { alert(alerttxt); return false; } else { return true; } } } function validate_form(thisform) { with(thisform) { if (validate_required(username, "用户名不能为空") == false) { username.focus(); return false; } if (validate_required(pass1, "密码不能为空") == false) { username.focus(); return false; } if (validate_required(pass2, "确认密码不能为空") == false) { username.focus(); return false; } if (pass1.value != pass2.value) { alert("两次密码不一致"); return false; } } } </script> </head> <!-- onSubmit="return validate(this)"这句,是一个验证表单的功能。当validate()这个函数返回值是true的时候,表单提交,反之则不提交。 --> <body> <form onsubmit="return validate_form(this) " action="jstest.php" method="post"> <div class="1"> <div class="1.1"> <div> <label>用户名</label> </div> <div> <input type="text" placeholder="请输入用户名号" name="username"> </div> </div> <div class="1.2"> <div> <label>密码</label> </div> <div> <input type="password" value="" name="pass1"> </div> </div> <div class="1.3"> <div> <label>确认密码</label> </div> <div> <input type="password" value="" placeholder="" name="pass2"> </div> </div> </div> <div class="2"> <input type="submit" name="sub" id="sub" value="注册" /> </div> </form> </body> </html>

 

 2.php页面

jstest.php

<?php
require ("mysql_class.php");//引入数据库处理文件
$db = new Mysql("localhost", "root", "201122", "userdb");
if (isset($_POST["sub"])) {
    
    //获取表单数据
    $username = $_POST["username"];
    $pass1 = $_POST["pass1"];
    $pass2 = $_POST["pass2"];
    define("TABLENAME", "user_zhuce");
    define("SEL", "where username=‘$username‘");
    define("COLE", "(username,password,password2)");
    define("DATEE", "(‘$username‘,‘$pass1‘,‘$pass2‘)");
    
    //信息是否为空
    $db -> isnull($username, $pass1, $pass2);
    //密码是否一致
    $db -> issame($pass1, $pass2);
    if ($pass1 == $pass2) {
        //查询是否有相同的用户名
        $sel = $db -> select(TABLENAME, SEL);
        $row = $db -> row($sel);
        $r = $row[0];
        if ($r == 1) {
            echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.alert" . "(" . "\"" . "该用户名已被注册" . "\"" . ")" . ";" . "</script>";
            echo "<script type=" . "\"" . "text/javascript" . "\"" . ">" . "window.location=" . "\"" . "index.html" . "\"" . "</script>";
            exit ;
        }

        //插入用户信息
        $insert = $db -> insert(TABLENAME, COLE, DATEE);
        $sel = $db -> select(TABLENAME, SEL);
        $row = $db -> row($sel);
        $r = $row[0];
        if ($r == 1) {
            echo "注册成功";
        }

        $db -> dbClose();

    }
}
?>

 3.数据库处理页面

mysql_class.php

<?php
header("content-type:text/html;charset=utf-8");
class Mysql {
    private $host;
    //服务器地址
    private $root;
    //用户名
    private $password;
    //密码
    private $database;
    //数据库名

    //通过构造函数初始化类
    function Mysql($host, $root, $password, $database) {
        $this -> host = $host;
        $this -> root = $root;
        $this -> password = $password;
        $this -> database = $database;
        $this -> connect();
    }

    function connect() {
        $this -> conn = mysql_connect($this -> host, $this -> root, $this -> password);
//        if($this->conn){
//            echo "连接mysql成功";
//        }else{
//            echo "连接mysql失败";
//        }
//        $this->conn=
        mysql_select_db($this -> database, $this -> conn);
//        if($this->conn){
//            echo "连接db成功";
//        }else{
//            echo "连接db失败";
//        }
        mysql_query("set names utf8");
    }

    function dbClose() {
        mysql_close($this -> conn);
    }

    function query($sql) {
        return mysql_query($sql);
    }

    

    function row($result) {
        return mysql_fetch_row($result);

    }
    
    

    function select($tableName, $condition) {
        return $this -> query("SELECT COUNT(*) FROM $tableName $condition");
    }

    function insert($tableName, $fields, $value) {
        $this -> query("INSERT INTO $tableName $fields VALUES$value");
    }
    
    function isnull($input1,$input2,$input3){
        if($input1==""||$input2==""||$input3==""){
            echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."请填写完整(php)!"."\"".")".";"."</script>";
           
        }
    }
    
    function issame($password1,$password2){
        if($password1!=$password2){
            echo"<script type="."\""."text/javascript"."\"".">"."window.alert"."("."\""."两次密码不一致!(php)"."\"".")".";"."</script>";  
           
        }
    }

}


?>

 


以上是关于javascript验证前端页面的主要内容,如果未能解决你的问题,请参考以下文章

前端防扒代码片段

前端防扒代码片段

前端防扒代码片段

前端防扒代码片段

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。