HTML+CSS+JS的表单(欢迎吐槽&借鉴)
首先是html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>( HTML+CSS+JS )_form</title>
</head>
<link rel="stylesheet" href="css/new_file.css"/>
<script type="text/javascript" src="js/new_file.js"></script>
<body>
<form onsubmit="return on_submit()">
<input id="U_name" class="var" type="text" placeholder="用户名" onfocus="on_name()" onblur="out_name()"/>
<var id="name_prompt"></var>
<input id="U_pswd" class="var" type="text" placeholder="密码" onfocus="on_pswd()" onblur="out_pswd()"/>
<var id="pswd_prompt"></var>
<input id="submit" type="submit" value="注册"/>
</form>
</body>
</html>
其次是css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 16px;
}
body{
background-color: gray;
}
form{
width: 350px;
margin: auto;
margin-top: 20%;
}
form input,var{ /*后代选择器*/
width: 250px; /*“定宽” 与 “margin: auto;” 一同使用使块级元素水平方向居中*/
margin: auto;
}
input{
display: block;
height: 40px;
border: 1px solid black;
border-radius: 8px;
padding-left:10px ; /*输入框内提示字符与左边框的距离*/
outline: none; /*去除被点击后的默认边框*/
}
.var:focus{ /*伪类选择器,获焦时*/
border-color: blue;
}
form var{ /*起初提示部分<var>内无值,所以需要盒子撑起来*/
display: block;
min-height: 30px; /*设置最小高值避免提示文字覆盖密码输入框*/
padding: 5px 0 10px 10px;
font-size: 0.5em;
color: red;
}
#submit{
border: none; /*去除按钮的默认边框*/
background-color: dodgerblue;
}
最后是js:
//观前须知:
// 1、JavaScript操作html的方法:
// 通过匹配ID、类、标签名等得到html对象(html标签),进而操作之。
// 2、正则表达式:描述了一种字符串匹配的模式。
// 3、函数test():返回一个boolean值,以判断字符串是否与该正则相匹配
// test()用法:正则表达式.test(字符串)。
//定义一个变量RegExp(字母开头,允许5-16字节,允许字母数字下划线)
var RegExp = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
//用户名输入框提示函数(获焦触发)
function on_name(){
//得到ID属性为U_name的对象
var username = document.getElementById("U_name");
//得到ID属性为name_prompt的对象
var name_prompt = document.getElementById("name_prompt");
//如果字符串username匹配正则RegExp,则返回TRUE,否则为FALSE
var result = RegExp.test(username.value);
//判断用户名的值的长度是否为零(即是否有输入)
if(username.value.length==0){
//修改<var>标签的文本颜色属性
name_prompt.style.color = 'yellow';
//修改<var>标签的文本(非法)
name_prompt.innerHTML = "字母开头<br />允许5-16字节<br />字母数字下划线";
}
//如果用户名的值的长度不为零(即是有输入)且与该正则匹配的结果为真
if(username.value.length!=0&&result==true){
//修改<var>标签的文本
name_prompt.innerHTML = "";
}
}
//用户名输入框提示函数(失焦触发)
function out_name(){
//得到ID属性为U_name的对象
var username = document.getElementById("U_name");
//得到一个ID属性为name_prompt的对象
var name_prompt = document.getElementById("name_prompt");
//判断字符串username是否与正则RegExp相匹配
var result = RegExp.test(username.value);
//如果字符串username长度为零(即无输入,非法)
if (username.value.length==0){
//修改<input>标签的边框颜色属性
username.style.borderColor = 'red';
//修改<var>标签的文本颜色属性
name_prompt.style.color = 'red';
//修改<var>标签的文本
name_prompt.innerHTML = "用户名不可以为空哦~";
}
//如果字符串username与正则RegExp不相匹配(用户名非法)
if(result==false){
//修改<input>标签的边框颜色属性
username.style.borderColor = 'red';
//修改<var>标签的文本颜色属性
name_prompt.style.color = 'red';
//修改<var>标签的文本
name_prompt.innerHTML = "用户名格式错误~";
}
//如果用户名合法
if(result==true){
//修改<input>标签的边框颜色属性
username.style.borderColor = 'blue';
//修改<var>标签的文本
name_prompt.innerHTML="";
}
}
//密码输入框提示函数(获焦触发)
function on_pswd(){
//得到ID属性为U_name的对象
var password = document.getElementById("U_pswd");
//得到ID属性为name_prompt的对象
var pswd_prompt = document.getElementById("pswd_prompt");
//如果字符串username匹配正则RegExp,则返回TRUE,否则为FALSE
var result = RegExp.test(password.value);
//判断用户名的值的长度是否为零(即是否有输入)
if(password.value.length==0){
//修改<var>标签的文本颜色属性
pswd_prompt.style.color = 'yellow';
//修改<var>标签的文本(非法)
pswd_prompt.innerHTML = "字母开头<br />允许5-16字节<br />字母数字下划线";
}
//如果用户名的值的长度不为零(即是有输入)且与该正则匹配的结果为真
if(password.value.length!=0&&result==true){
//修改<var>标签的文本
pswd_prompt.innerHTML = "";
}
}
//密码输入框提示函数(失焦触发)
function out_pswd(){
//得到ID属性为U_name的对象
var password = document.getElementById("U_pswd");
//得到一个ID属性为name_prompt的对象
var pswd_prompt = document.getElementById("pswd_prompt");
//判断字符串username是否与正则RegExp相匹配
var result = RegExp.test(password.value);
//如果字符串password长度为零(即无输入,非法)
if (password.value.length==0){
//修改<input>标签的边框颜色属性
password.style.borderColor = 'red';
//修改<var>标签的文本颜色属性
pswd_prompt.style.color = 'red';
//修改<var>标签的文本
pswd_prompt.innerHTML = "密码不可以为空哦~";
}
//如果字符串password与正则RegExp不相匹配(密码非法)
if(result==false){
//修改<input>标签的边框颜色属性
password.style.borderColor = 'red';
//修改<var>标签的文本颜色属性
pswd_prompt.style.color = 'red';
//修改<var>标签的文本
pswd_prompt.innerHTML = "密码格式错误~";
}
//如果密码合法
if(result==true){
//修改<input>标签的边框颜色属性
password.style.borderColor = 'blue';
//修改<var>标签的文本
pswd_prompt.innerHTML="";
}
}
//防止无输入提交、不合法输入,只输入账号/密码的清空
function on_submit(){
//获取用户名、密码的值
var username = document.getElementById("U_name").value;
var password = document.getElementById("U_pswd").value;
//如果用户名、密码的值与该正则表达式匹配则返回Ture,即允许函数执行:允许提交表单
if(RegExp.test(username)&&RegExp.test(password)){
return true;
}else{
return false;
}
}
本人混子,大一摆烂,大二(现在)自学php,java,html,css,js,sql,一起加油吧!希望我做的这些能帮到你!此外,欢迎大佬指点,谢谢谢谢!!!
版权声明:本文为m0_63445979原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。