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+ ...
随机推荐
- java线程安全总结 - 2 （转载）
原文地址:http://www.jameswxx.com/java/%E7%BA%BF%E7%A8%8B%E5%AE%89%E5%85%A8%E6%80%BB%E7%BB%93%EF%BC%88%E4 ...
- Servlet过滤器---编码转换过滤器
该实例用于将请求与相应的编码设置为当前网站的默认编码 java类: import java.io.IOException; import javax.servlet.Filter; import ja ...
- 统计大写字母个数&压缩和去重（过滤）
找出给定字符串中大写字符(即'A'-'Z')的个数 接口说明 原型:int CalcCapital(String str); 返回值:int 知识点 字符串 运行时间限制 10M 内存限制 128 输 ...
- 《Cracking the Coding Interview》——第5章：位操作——题目1
2014-03-19 05:45 题目:给定两个数M和N,将N按照二进制位,覆盖到M的特定段位中去. 解法:位操作,请看代码. 代码: // 5.1 Insert one number into th ...
- nginx配置及HTTPS配置示例
一.nginx简单配置示例 user www www; worker_processes ; #error_log logs/error.log; #error_log logs/error.log ...
- Python第三方模块tesserocr安装
介绍 在爬虫过程中,难免会遇到各种各样的验证码,而大多数验证码还是图形验证码,这时候我们可以直接用 OCR 来识别. tesserocr 是 Python 的一个 OCR 识别库 ,但其实是对 tes ...
- C++ Primer 第2章 变量和基本类型
C++ Primer 第2章 变量和基本类型 C Primer 第2章 变量和基本类型 1 基本内置类型 算数类型 类型转换 字面值常量 2 变量 变量定义 3 复合类型 引用d左引用 指针d 4 c ...
- 条件随机场(Conditional random field)
条件随机场真是把我给折磨坏了啊,本以为一本小小的<统计学习方法>攻坚剩下最后一章,心情还是十分愉悦的,打算一口气把它看完,结果真正啃起来真是无比的艰难啊,每一句对我都好像是天书一般,怎么这 ...
- Vue-cli 本地开发请求https 接口 DEPTH_ZERO_SELF_SIGNED_CERT
环境:npm run dev 本地开发连接后台的开发环境的接口. 贴上proxyTable 的转发(代理?反向?这个具体叫什么不明白...) proxyTable: { "/api" ...
- 破解navicat
每次试用版也真的是烦,注册机试过一次后,又提示注册 果断选择其他方法 官网先下载一个正版 再下patchNavicat.exe 安装完navicat后直接点击patchNavicat 选择navica ...