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>";  

        }
    }

}

?>
时间: 2024-08-01 10:46:23

javascript验证前端页面的相关文章

Python之路-(js正则表达式、前端页面的模板套用、Django基础)

js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m 表示多行匹配 登录注册验证: test: 判断字符串是否符合规定的规则 rep = /\d+/;   (定义规则) rep.test('')   (引号里面必须包含字母和数字才返回true,否则为false) rep = /^\d+$/; (只有是纯数字时候才返回true,否则是false) exe

web前端页面性能优化小结

转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html PS:结合了精英的思想和自己的一些小小的总结~ 影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,

servlet自动获取前端页面提交数据

servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+MyBatis进行数据持久化的过程.这里只介绍页面到servlet(controller)提交数据封装对象的过程,MVC+MyBatis访问数据库不在这里介绍. 1.前端页面及代码 1)前端表单页面构建(用于测试简单构建的页面有点丑陋哦~) 2)前端jsp页面代码   这里使用了Ajax异步 get

前端页面有哪三层构成 兼容性

[HTML && CSS]1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 首先我讲讲如何触发两种模式:        加入xml头部声明可以触发IE浏览器的Quirks mode,触发之后,浏览器解析方式就和IE5.5一样,拥有IE5.5一样的bug和其他问题,行为(Javascript)也是如此.          IE6的触发        在XHTML的DOCTYPE前加入XML声明  <?xml version="1.0"

web 前端页面性能优化总结

影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.不仅仅如此,如果前端优化 得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户

前端页面优化

影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的.除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,因

基于jQuery.i18n.propertieschajian实现前端页面国际化

一.简介 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization,又称 i18n,"i"为单词的第一个字母,"18"为"i"和"n"之间单词的个数,而"n"代表这个单词的最后一个字母.在计算机领域,国际化是指设计能够适应各种区域和语言环境的软件的过程. jQuery.i18n.properties 是一款轻量级的 j

前端页面性能参数搜集

经常会看些性能分析的书,但是实际在做优化的时候又无从下手. 因为没有数据,也不能确定实际用户到底在哪一环影响了他们的性能. 现在H5提供了一些很方便的Performance接口,可以让我们更方便的搜集到用户的数据,不过有几个方法的兼容性实在太差. 插件已经上传到Github中,可以在这里获取到,index.html中写的是一些示例,插件源码在"js/primus.js"中. 写的比较仓促,自己能力也有限,如有问题,欢迎指正. 一.请求时间统计 上图是performance.timing

Javascript实现前端简单路由

http://www.helloweba.com/view-blog-385.html WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由.后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁.同样前端路由在单页面应用也很常见,它使得前端页面体验更流畅. 前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等.前端路由和后端路由原理一样,是让所有的交互和展现