书城项目-第一阶段:表单验证的实现
2021/5/23 18:30:10
本文主要是介绍书城项目-第一阶段:表单验证的实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
表单验证的实现
- 一、项目框架
- 二、页面样式
- regist.html
- regist_success.html
- 三、部分代码
- regist.html
一、项目框架
二、页面样式
regist.html
regist_success.html
三、部分代码
regist.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>尚硅谷会员注册页面</title> <link type="text/css" rel="stylesheet" href="../../static/css/style.css"> <script type="text/javascript" src="../../static/script/jquery.js"></script> <script type="text/javascript"> //页面加载完成之后 $(function () { //给注册绑定单击事件 $("#sub_btn").click(function () { //验证用户名:必须由字母,数字下划线组成,并且长度为5到12位 //1获取用户名输入框里的内容 var usernameText=$("#username").val(); //2创建正则表达式对象 var usernamePatt=/^\w{5,12}$/; //3使test方法验证 if(!usernamePatt.test(usernameText)){ //4提示用户结果 $("span.errorMsg").text("用户名不合法!"); return false; } //验证密码:必须由字母,数字下划线组成,并且长度为5到12位 //1获取用户名输入框里的内容 var passwordText=$("#password").val(); //2创建正则表达式对象 var passwordPatt=/^\w{5,12}$/; //3使test方法验证 if(!passwordPatt.test(passwordText)){ //4提示用户结果 $("span.errorMsg").text("密码不合法!"); return false; } //验证确认密码:和密码相同 //1获取确认密码内容 var repwdText=$("#repwd").val(); //2和密码相比较 if (repwdText!=passwordText){ //3提示用户 $("span.errorMsg").text("确认密码和密码不一致!"); return false; } //邮箱验证:xxxxx@xxx.com //1获取邮箱里的内容 var emailText=$("#email").val(); //2创建正则表达式对象 var emailPatt=/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/; //3使test方法验证 if(!emailPatt.test(emailText)){ //4提示用户结果 $("span.errorMsg").text("邮箱格式不合法!"); return false; } //验证码现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。 var codeText=$("#code").val(); //去掉验证码前后空格 alert("去空格前["+codeText+"]"); codeText=$.trim(codeText); alert("去空格后["+codeText+"]"); if (codeText==null||codeText==""){ //提示用户结果 $("span.errorMsg").text("验证码不能为空"); return false; } $("span.errorMsg").text(""); }); }); </script> <style type="text/css"> .login_form { height: 420px; margin-top: 25px; } </style> </head> <body> <div id="login_header"> <img class="logo_img" alt="" src="../../static/img/logo.gif"> </div> <div class="login_banner"> <div id="l_content"> <span class="login_word">欢迎注册</span> </div> <div id="content"> <div class="login_form"> <div class="login_box"> <div class="tit"> <h1>注册尚硅谷会员</h1> <span class="errorMsg"></span> </div> <div class="form"> <form action="regist_success.html"> <label>用户名称:</label> <input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username"/> <br/> <br/> <label>用户密码:</label> <input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password"/> <br/> <br/> <label>确认密码:</label> <input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd"/> <br/> <br/> <label>电子邮件:</label> <input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email"/> <br/> <br/> <label>验证码:</label> <input class="itxt" type="text" style="..." id="code"/> <img alt="" src="../../static/img/code.bmp" style="..."> <br/> <br/> <input type="submit" value="注册" id="sub_btn"/> </form> </div> </div> </div> </div> </div> </body> </html>
这篇关于书城项目-第一阶段:表单验证的实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南
- 2024-09-26Springboot微服务资料入门教程