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验证前端页面的更多相关文章
- jquery验证前端页面
一共三个页面 jquery.html文件(前端页面,jquery验证用户信息) jquerytest.php文件(后台处理页面) jquerydb.php文件(数据库) 数据表结构 jquery.ht ...
- ajax验证前端页面
1.html页面 用ajax验证表单的时候不需要form标签,并把提交按钮由type=“submit ”改为type=“button” 数据表结构 ajax.html <!DOCTYPE htm ...
- javascript版前端页面RSA非对称加密解密
最近由于项目需要做一个url传参,并在页面显示参数内容的需求,这样就会遇到一个url地址可能会被假冒, 并传递非法内容显示在页面的尴尬情况 比如xxx.shtml?server=xxx是坏人& ...
- JavaScript限制前端页面用户表单输入
onkeyup事件 onkeyup 事件会在键盘按键被松开时发生. 内容来源:自成e家 1.只能输入数字 <input onkeyup = "value=value.replace(/ ...
- 由前端登录验证，页面跳转，携带headers token引发的思考和尝试
目录 1 前言 2 我的实现方式与存在的问题 3 我想到的解决方案 3.1 前端跳转时携带headers{'token': token} 不就行了(经验证不可行) 3.2 前端跳转封装请求,携带hea ...
- web前端页面性能优化
影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
- Python之路-(js正则表达式、前端页面的模板套用、Django基础）
js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../ 用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...
- web前端页面性能优化小结
影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...
- servlet自动获取前端页面提交数据
servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+ ...
随机推荐
- 13-在Core Mvc中使用Options
配制文件appsettings和Classes来自12节 在HomeController增加如下代码,使用IOption方式进行注入 public class HomeController : Con ...
- 我今天的收获，必备stadio 插件
1.ADBWIFI 必须的,说不定你就用到了. 2.ADB Idea 必须 3.JavaDoc 4.Translation 5.Gradle Killer
- Android Studio快速的接受一个项目
1.关键词搜索法,搜索这个词,然后仔细的去找找.肯定可以找到的,虽然可能会有一些奔波. 2.Android device moniter ,可以抓屏幕,看布局,而且可以看到资源id.看到资源id,你说 ...
- Trident整合Kafka
首先编写一个打印函数KafkaPrintFunction import org.apache.storm.trident.operation.BaseFunction; import org.apac ...
- Null / Loopback (Null)
参考: http://www.cnblogs.com/caoguoping100/p/3654452.html https://wiki.wireshark.org/NullLoopback 抓包安装 ...
- css改变光标
<span style="cursor:auto"> Auto</span><br /> <span style="cursor ...
- 《Cracking the Coding Interview》——第13章：C和C++——题目2
2014-04-25 19:29 题目:对比一下哈希表和STL中的map的区别,哈希表如何实现?如果数据规模比较小,可以用什么来代替哈希表? 解法:哈希表可以理解为一堆桶,每个桶都有唯一的id,桶里可 ...
- python学习笔记五：模块和包
一.模块用import导入 cal.py: #!/usr/bin/python def add(x,y): return x+y if __name__ == '__main__': print ad ...
- CMDB项目实战
01-CMDB项目介绍 02-CMDB开发背景 03-CMDB开发目的 04-CMDB资产采集方式之agent 05-CMDB资产采集方式之ssh 06-CMDB资产采集方式之saltstack 07 ...
- ansible自动安装jdk
脚本功能:安装jdk 测试环境:CentOS6.7 说明: 1.卸载系统自带的openjdk,重新安装Oracle jdk,支持Hotspot,性能更好,更稳定. 2.jdk软件包按文档说明进行定制( ...