web前台界面的两种验证方式
JSON的全称是”JavaScript Object Notation”，意思是JavaScript对象表示法，它是一种基于文本，独立于语言的轻量级数据交换格式。
第一种：
用户体验可能不是太好，但是对用户的警示作用很明显（界面弹窗警告）
表单 onsubmit函数
JavaScript
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>js_alert</title>
8 <title>注册页面</title>
9 <script>
10 function checkForm(){
11 var cvalue = document.getElementById("college").value;
12 if(cvalue=="")
13 {
14 alert("毕业大学未填写！");
15 return false;
16 }
17 var uValue = document.getElementById("user").value;
18 if(uValue==""){
19 alert("用户名不能为空!");
20 return false;
21 }
22
23 var pValue = document.getElementById("password").value;
24 if(pValue==""){
25 alert("密码不能为空!");
26 return false;
27 }
28
29 var rpValue = document.getElementById("repassword").value;
30 if(rpValue!=pValue){
31 alert("两次密码输入不一致!");
32 return false;
33 }
34
35 var eValue = document.getElementById("email").value;
36 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
37 alert("邮箱格式不正确!");
38 return false;
39 }
40 }
41 </script>
42 </head>
43 <body>
44 <body>
45 <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
46 <tr>
47 <td height="600px" >
48 <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
49 <table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
50 <tr>
51 <td>
52 毕业大学
53 </td>
54 <td>
55 <input type="text" id="college" size="34px" name="college"/>
56 </td>
57 </tr>
58
59
60 <tr>
61 <td>
62 用户名
63 </td>
64 <td>
65 <input type="text" name="user" size="34px" id="user"/>
66 </td>
67 </tr>
68
69 <tr>
70 <td>
71 密码
72 </td>
73 <td>
74 <input type="password" name="password" size="34px" id="password" />
75 </td>
76 </tr>
77
78 <tr>
79 <td>
80 确认密码
81 </td>
82 <td>
83 <input type="password" name="repassword" size="34px" id="repassword"></input>
84 </td>
85 </tr>
86
87 <tr>
88 <td>
89 Email
90 </td>
91 <td>
92 <input type="text" name="email" size="34px" id="email"/>
93 </td>
94 </tr>
95
96 <tr>
97 <td>
98 姓名
99 </td>
100 <td>
101 <input type="text" name="username" size="34px" id="username"></input>
102 </td>
103 </tr>
104
105 <tr>
106 <td>
107 性别
108 </td>
109 <td>
110 <input type="radio" name="sex" value="男"/>男
111 <input type="radio" name="sex" value="女"/>女
112 </td>
113 </tr>
114
115 <tr>
116 <td>
117 出生日期
118 </td>
119 <td>
120 <input type="text" name="birthday" size="34px" id="birthday"></input>
121 </td>
122 </tr>
123
124 <tr>
125 <td colspan="2">
126 <center>
127 <input type="submit" value="注册" />
128 </center>
129 </td>
130 </tr>
131 </table>
132 </form>
133 </td>
134 </tr>
135 </table>
136 </body>
137 </html>
第二种
用户体验好，每一个框的外面用文字提示用户
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>js_before</title>
8 <script>
9 function showTips(id,info){
10 document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
11 }
12
13 function check(id,info){
14 var uValue = document.getElementById(id).value;
15 if(uValue==""){
16 document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
17 }else{
18 document.getElementById(id+"span").innerHTML="";
19 }
20 }
21 </script>
22 </head>
23 <body>
24 <body>
25 <table border="1px" align="center" width="1300px" cellpadding="0px"
26 cellspacing="0px">
27 <tr>
28 <td height="600px">
29 <form action="#" method="get" name="regForm"
30 onsubmit="return checkForm()">
31 <table border="1px" width="450px" height="400px" align="center"
32 cellpadding="0px" cellspacing="0px" bgcolor="white">
33 <tr>
34 <td>用户名</td>
35 <td><input type="text" name="user" size="34px" id="user"
36 onfocus="showTips('user','用户名必填！')"
37 onblur="check('user','用户名不能为空！')" />
38 <span id="userspan"></span>
39 </td>
40 </tr>
41 <tr>
42 <td>密码</td>
43 <td><input type="password" name="password" size="34px"
44 id="password" onfocus="showTips('password','密码必填')"
45 onblur="check('password','密码不能为空!')" />
46 <span id="passwordspan"></span>
47 </td>
48 </tr>
49
50 <tr>
51 <td>确认密码</td>
52 <td><input type="password" name="repassword" size="34px"
53 id="repassword"></input></td>
54 </tr>
55
56 <tr>
57 <td>Email</td>
58 <td><input type="text" name="email" size="34px" id="email" />
59 </td>
60 </tr>
61
62 <tr>
63 <td>姓名</td>
64 <td><input type="text" name="username" size="34px"
65 id="username"></input></td>
66 </tr>
67
68 <tr>
69 <td>性别</td>
70 <td><input type="radio" name="sex" value="男" />男 <input
71 type="radio" name="sex" value="女" />女</td>
72 </tr>
73
74 <tr>
75 <td>出生日期</td>
76 <td><input type="text" name="birthday" size="34px"
77 id="birthday"></input></td>
78 </tr>
79 <tr>
80 <td>喜欢的游戏</td>
81 <td><input type="text" name="game" list="data" id="game"
82 onfocus="showTips('game','该输入栏必填')"
83 onblur="check('game','请填写该输入栏！')" />
84 <span id="gamespan"></span>
85
86 <datalist id="data">
87 <option value="1">1</option>
88 <option value="2">2</option>
89 <option value="3">3</option>
90 <option value="4">4</option>
91 <option value="5">5</option>
92 </datalist>
93 </td>
94
95 </tr>
96 <tr>
97 <td colspan="2">
98 <center>
99 <input type="submit" value="注册" />
100 </center>
101 </td>
102 </tr>
103 </table>
104 </form>
105 </td>
106 </tr>
107 </table>
108 </body>
109 </html>
web前台界面的两种验证方式的更多相关文章
- JGit与远程仓库链接使用的两种验证方式（ssh和https）
JGit是使用JAVA的API来操控Git仓库的库,由Eclipse公司维护.他提供的API分成两个层次,底层命令和高层命令.底层API是直接作用于低级的仓库对象,高层的API是一个面向普通用户级别功 ...
- JGit与远程仓库链接使用的两种验证方式(ssh和https)
JGit是使用JAVA的API来操控Git仓库的库,由Eclipse公司维护.他提供的API分成两个层次,底层命令和高层命令.底层API是直接作用于低级的仓库对象,高层的API是一个面向普通用户级别功 ...
- SSH两种验证方式原理
本帖转自 http://www.cnblogs.com/hukey/p/6248468.html SSH验证方式有两种,分别为用户密码认证以及密钥认证. 1.用户密码认证方式 说明: (1) 当客户端 ...
- [ SSH 两种验证方式原理 ]
SSH登录方式主要分为两种: 1. 用户名密码验证方式 说明: (1) 当客户端发起ssh请求,服务器会把自己的公钥发送给用户: (2) 用户会根据服务器发来的公钥对密码进行加密: (3) 加密后的信 ...
- 前端提交表单两种验证方式记录 jq或h5 required属性
JQuery: <form id="form"> <input type="text" name="aaa"> &l ...
- Web APi之认证（Authentication）两种实现方式【二】（十三）
前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底 ...
- 转 Web APi之认证（Authentication）两种实现方式【二】（十三）
前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再废叙述废话. 序言 对于所谓的认证说到 ...
- Web.xml中四种验证方式
源地址:https://blog.csdn.net/imimi_/article/details/78805642 <security-constraint> 的子元素 <http- ...
- Windows校验文件哈希hash的两种常用方式
大家经常都到哪儿去下载软件和应用程序呢?有没想过下载回来的软件.应用程序或资源是否安全呢?在 Windows 10 和 Office 2016 发布当初,很多没权限的朋友都使用第三方网站去下载安装映像 ...
随机推荐
- 题解 洛谷 P3396 【哈希冲突】（根号分治）
根号分治 前言 本题是一道讲解根号分治思想的论文题(然鹅我并没有找到论文),正 如论文中所说,根号算法--不仅是分块,根号分治利用的思想和分块像 似却又不同,某一篇洛谷日报中说过,分块算法实质上是一种 ...
- 最新小样本学习综述 A Survey on Few-Shot Learning | 四大模型Multitask Learning、Embedding Learning、External Memory…
目录 原文链接: 小样本学习与智能前沿 01 Multitask Learning 01.1 Parameter Sharing 01.2 Parameter Tying. 02 Embedding ...
- 【NOIP2017提高A组模拟9.17】信仰是为了虚无之人
[NOIP2017提高A组模拟9.17]信仰是为了虚无之人 Description Input Output Sample Input 3 3 0 1 1 7 1 1 6 1 3 2 Sample O ...
- 用java以正确的姿势刷CSP
许多程序算法考试中,用java是个不错的选择,它几乎实现了所有c++能实现的,所以越来越受Acmer的欢迎.总结一下用到的一些技巧和方法.更多关于csp的可参考海岛blog|皮卡丘 1． 输出 规格化 ...
- moviepy音视频开发：音频剪辑基类AudioClip
☞ ░ 前往老猿Python博文目录 ░ 一.背景知识介绍 1.1.声音三要素: 音调:人耳对声音高低的感觉称为音调(也叫音频).音调主要与声波的频率有关.声波的频率高,则音调也高. 音量:也就是响度 ...
- PyQt学习随笔：自定义信号连接时报AttributeError: 'PyQt5.QtCore.pyqtSignal' object has no attribute 'connect'
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 如果使用自定义信号,一定要记得信号是类变量,必须在类中定义,不能在实例 ...
- 第11.18节 Python 中re模块的匹配对象
匹配对象是Python中re模块正则表达式匹配处理的返回结果,用于存放匹配的情况.老猿认为匹配对象更多的应该是与组匹配模式的功能对应的,只是没有使用组匹配模式的正则表达式整体作为组0. 为了说明下面的 ...
- PyQt（Python+Qt）学习随笔：Model/View中的枚举类 Qt.MatchFlag的取值及含义
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 枚举类 Qt.MatchFlag描述在模型中搜索项时可以使用的匹配类型,它可以在QStandardI ...
- 百度前端技术学院-基础-day7.8
任务:参考如下设计稿实现HTML页面及CSS样式 代码 点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...
- Social Infrastructure Information Systems Division, Hitachi Programming Contest 2020 C题题解
首先,我们将题目理解成若\(i\)与\(j\)距离恰好为\(3\),则不可能\(p_i \equiv p_j \equiv 1 \space or \space 2 (\bmod 3)\).这就相当于 ...