HTML页面登录时的JS验证方法_javascript技巧
程序员文章站
2022-05-14 18:43:21
...
开发一个注册的HTML页面, 用于搜集用户的注册信息。包括: 姓名(不能为空), 年龄(必须超过17岁), 体重(30-150kg), 班级(下拉列表),登陆密码(至少8位长)、确认密码(和登录密码一致),Email(不能为空) , 电话,QQ, 个人简历等信息。 并针对这些表的元素来创建相应的验证,如果检测到错误, 在输入框后面用红色的字显示错误。要用到前面几节学习过的单行文本输入框text、下拉列表框select、密码输入框password、多行文本输入框textarea。这是一个较实用的用户注册表单.。
register.html:
实验2
check.css:
td.check{
color:#C00;
font-weight:bold;
}
load.js:
function check(str)
{
var x = document.getElementById(str);
var y = document.getElementById(str+"Check");
//alert("check!");
if(str=="name")
{
if(x.value=="")
y.hidden = false;
else
y.hidden = true;
}
else if(str=="age")
{
if(isNaN(x.value) || x.value y.hidden = false;
else
y.hidden = true;
}
else if(str=="weight")
{
x = x.value;
if(isNaN(x) || x 150)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="password")
{
x = x.value.length;
if(x {
y.hidden = false;
//alert("check!");
}
else
y.hidden = true;
}
else if(str=="cpassword")
{
var z = document.getElementById("password").value;
x = x.value;
if(x != z)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="email")
{
x = x.value.indexOf("@")
if(x == -1)
y.hidden = false;
else
y.hidden = true;
}
return y.hidden;
}
function validate()
{
var arr=["name", "age", "weight", "password", "cpassword", "email"];
var i = 0;
submitOK = true;
while(i {
if(!check(arr[i]))
{
alert(arr[i]+" wrong!");
submitOK = false;
break;
}
i++;
}
if(submitOK)
{
alert("提交成功!");
return true;
}
else
{
alert("提交失败");
return false;
}
}
function load_greeting()
{
//alert("visit \n");
}
register.html:
复制代码 代码如下:
check.css:
复制代码 代码如下:
td.check{
color:#C00;
font-weight:bold;
}
load.js:
复制代码 代码如下:
function check(str)
{
var x = document.getElementById(str);
var y = document.getElementById(str+"Check");
//alert("check!");
if(str=="name")
{
if(x.value=="")
y.hidden = false;
else
y.hidden = true;
}
else if(str=="age")
{
if(isNaN(x.value) || x.value y.hidden = false;
else
y.hidden = true;
}
else if(str=="weight")
{
x = x.value;
if(isNaN(x) || x 150)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="password")
{
x = x.value.length;
if(x {
y.hidden = false;
//alert("check!");
}
else
y.hidden = true;
}
else if(str=="cpassword")
{
var z = document.getElementById("password").value;
x = x.value;
if(x != z)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="email")
{
x = x.value.indexOf("@")
if(x == -1)
y.hidden = false;
else
y.hidden = true;
}
return y.hidden;
}
function validate()
{
var arr=["name", "age", "weight", "password", "cpassword", "email"];
var i = 0;
submitOK = true;
while(i {
if(!check(arr[i]))
{
alert(arr[i]+" wrong!");
submitOK = false;
break;
}
i++;
}
if(submitOK)
{
alert("提交成功!");
return true;
}
else
{
alert("提交失败");
return false;
}
}
function load_greeting()
{
//alert("visit \n");
}
推荐阅读
-
JS实现加载时锁定HTML页面元素的方法
-
两种方法实现在HTML页面加载完毕后运行某个js_javascript技巧
-
浏览器解析js生成的html出现样式问题的解决方法_javascript技巧
-
网站繁简切换的JS遇到页面卡死的解决方法_javascript技巧
-
JS操作HTML自定义属性的方法_javascript技巧
-
js实现鼠标悬停图片上时滚动文字说明的方法_javascript技巧
-
js获得页面的高度和宽度的方法_javascript技巧
-
js获取html页面节点方法(递归方式)_javascript技巧
-
JS实现在页面随时自定义背景颜色的方法_javascript技巧
-
javascript - 一个有一个css文件一个js文件的html页面被访问时chrome会建立几个TCP连接?发起几次htttp请求?