注册功能分析
表单校验
表单校验：
1、用户名：单词字符，长度8到20位
2、密码：单词字符，长度8到20位
3、email：邮件格式
4、姓名：非空
5、手机号：手机号格式
6、出生日期：非空
7、验证码：非空
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/register.css">
<script src="js/jquery-3.3.1.js">script>
<script>
/*
表单校验：
1、用户名：单词字符，长度8到20位
2、密码：单词字符，长度8到20位
3、email：邮件格式
4、姓名：非空
5、手机号：手机号格式
6、出生日期：非空
7、验证码：非空
*/
//校验用户名
function checkUsername() {
//1、获取用户名
var usernmae = $("#username").val();
//2、定义正则
var reg_username = /^\w{8,20}$/;
//判断给出提示信息
var flag = reg_username.test(usernmae);
if (flag){
//用户名合法
$("#username").css("border","");
} else {
//用户名非法
$("#username").css("border","1px solid red");
}
return flag;
}
//校验密码
function checkPassword(){
//1、获取用户名
var password = $("#password").val();
//2、定义正则
var reg_password = /^\w{8,20}$/;
//判断给出提示信息
var flag = reg_password.test(password);
if (flag){
//用户名合法
$("#password").css("border","");
} else {
//用户名非法
$("#password").css("border","1px solid red");
}
return flag;
}
//校验邮箱
function checkEmail(){
//1、获取邮箱
var email = $("#email").val();
//定义规则
var reg_email = /^\w+@\w+\.\w+$/;
//判断
var flag = reg_email.test(email);
if (flag){
$("#email").css("border","");
}else {
$("#email").css("border","1px solid red");
}
return flag;
}
$(function () {
$("#registerForm").submit(function () {
return checkUsername() && checkPassword() && checkEmail();
});
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
})
script>
head>
<body>
<div id="header">div>
<div class="rg_layout">
<div class="rg_form clearfix">
<div class="rg_form_left">
<p>新用户注册p>
<p>USER REGISTERp>
div>
<div class="rg_form_center">
<form id="registerForm" action="user">
<input type="hidden" name="action" value="register">
<table style="margin-top: 25px;">
<tr>
<td class="td_left">
<label for="username">用户名label>
td>
<td class="td_right">
<input type="text" id="username" name="username" placeholder="请输入账号">
td>
tr>
<tr>
<td class="td_left">
<label for="password">密码label>
td>
<td class="td_right">
<input type="text" id="password" name="password" placeholder="请输入密码">
td>
tr>
<tr>
<td class="td_left">
<label for="email">Emaillabel>
td>
<td class="td_right">
<input type="text" id="email" name="email" placeholder="请输入Email">
td>
tr>
<tr>
<td class="td_left">
<label for="name">姓名label>
td>
<td class="td_right">
<input type="text" id="name" name="name" placeholder="请输入真实姓名">
td>
tr>
<tr>
<td class="td_left">
<label for="telephone">手机号label>
td>
<td class="td_right">
<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
td>
tr>
<tr>
<td class="td_left">
<label for="sex">性别label>
td>
<td class="td_right gender">
<input type="radio" id="sex" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
td>
tr>
<tr>
<td class="td_left">
<label for="birthday">出生日期label>
td>
<td class="td_right">
<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
td>
tr>
<tr>
<td class="td_left">
<label for="check">验证码label>
td>
<td class="td_right check">
<input type="text" id="check" name="check" class="check">
<img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
<script type="text/javascript">
//图片点击事件
function changeCheckCode(img) {
img.src="checkCode?"+new Date().getTime();
}
script>
td>
tr>
<tr>
<td class="td_left">
td>
<td class="td_right check">
<input type="submit" class="submit" value="注册">
<span id="msg" style="color: red;">span>
td>
tr>
table>
form>
div>
<div class="rg_form_right">
<p>
已有账号？
<a href="#">立即登录a>
p>
div>
div>
div>
<div id="footer">div>
<script type="text/javascript" src="js/include.js">script>
body>
html>
Original: https://www.cnblogs.com/xjw12345/p/16615816.html
Author: xjw12345
Title: 注册功能分析以及表单校验
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/574783/
转载文章受原作者版权保护。转载请注明原作者出处！