javascript验证前端页面

Posted 2020-10-02 讨厌麻烦

tags:

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

<!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代码片段，使你更加容易前端开发。