|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
/* 整个表格居中 */
margin: 0 auto;
}
/* 提示信息的样式 */
.info
{
color: blue;
/*
em:浏览器默认的字体,12px;
0.8em: 12*0.8 px;
*/
font-size: 0.8em;
border: 1px solid red;
}
.err{
color: red;
/*加粗*/
font-weight: bolder;
}
.eye
{
width: 30px;
height: 20px;
/*点击到图片上时变成小手*/
cursor: pointer;
}
</style>
<script type="text/javascript">
/* 验证邮箱
返回值的含义:
如果邮箱格式正确,就返回true,
如果邮箱格式不正确,就返回false
*/
function verifyEmail(){
/* 验证邮箱
~先获取邮箱文本框里面的值
~如何使用js取到input框里面的value属性
~dom(标签,节点,元素)的三要素
~取到dom元素(选择器;id选择器)
~修改三要素
~获取三要素
*/
/* 如何根据使用id选择器取到邮箱的input框呢? */
var emailDom = document.getElementById("email");
//console.info("==获取属性==" + emailDom.attributes.value.value);
// console.info("==获取属性==" + emailDom.getAttribute("value"));
/* 获取邮箱文本框中的值 */
var emailValue = emailDom.value;
console.info("==邮箱的长度==" + emailValue.length);
if (emailValue == ''){
alert("--邮箱不能为空--");
return false;
}
if(emailValue.length < 6){
alert("--邮箱至少是6个--");
return false ;
}
/*
/^[\w][email protected][\w]+\.[\w]+$/
[email protected]
*/
var eamilReg = new RegExp(/^[\w][email protected][\w]+\.[\w]+$/);
/* 如果匹配,返回true,如果不匹配返回false */
var emailValueFlag = eamilReg.test(emailValue);
if(!emailValueFlag)
{
/* 如果emailValueFlag为false,前面加了一个!结果就是true */
alert("邮箱格式不正确");
return false ;
}
return true;
}
function verifyUserName(){
var usernameDom = document.getElementById("username");
var usernameValue = usernameDom.value;
console.info("==usernameValue==" + usernameValue);
if (usernameValue == ''){
alert("--用户名不能为空--");
return false;
}
return true;
}
/*手机号验证*/
function verifyPhone(){
var phone = document.getElementById('phone').value;
console.info("==phone=="+ phone);
if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){
alert("手机号码有误，请重填");
return false;
}
}
/*介绍验证*/
function verifyIntro(){
var introDom = document.getElementById("intro");
var introDomValue = introDom.value;
if(introDomValue == ''){
alert("--介绍不能为空--");
return false;
}
}
/* 表单验证
此方法谁来触发
~为提交按钮增加一个点击事件
~为表单提交一个提交事件
*/
function testVal(){
/* 调用验证邮箱的方法 */
if(!verifyEmail())
{
return false ;
}
/* 验证用户名:
只需要验证长度和不为空就可以
参见验证邮箱
*/
if(!verifyUserName()){
return false;
}
/* 验证手机号:
验证长度为11不为空、仅数字
*/
if(!verifyPhone()){
return false;
}
/* 验证简介:
验证不为空
*/
if(!verifyIntro()){
return false;
}
/* 验证密码和确认密码 */
var passwordDiv = document.getElementById("password");
var confirmPassDiv = document.getElementById("confirmPass");
if (passwordDiv.value != confirmPassDiv.value) {
/* 提示语我们已经使用过弹出框了,不想使用了,
换一个：换成提示信息 */
var confirmPassTipDiv = document.getElementById("confirmPassTip");
/* 将confirmPassTip中间的内容换掉 */
confirmPassTipDiv.innerHTML = "两次密码不一样" ;
/* 还要换样式,如何修改className的值 */
confirmPassTipDiv.className = "err";
//alert("==两次密码不一样==")
return false ;
}
alert("==验证成功==");
return false;
}
</script>
<script type="text/javascript">
/*
显示密码
参数传的是密码框的id
*/
/* 计数器
每点击一次,count+1
如果为奇数次就隐藏
如果为偶数次就显示
全局的变量不好使
*/
//var count = 0 ;
function showPass(passId){
/* 获取的元素是input */
var passDiv = document.getElementById(passId);
/* input:type是password,换成text,不就看到了密码吗?
type:是input的一个"属性"
*/
/*
变量可以存储到元素上;
元素当成一个存储器来使用;(AngularJS:)
count:是input的一个属性,取值嘛
*/
var count = passDiv.attributes.count.value ;
if(count % 2 == 0)
{
/* 显示 */
passDiv.attributes.type.value = "text";
}else
{
/* 隐藏*/
passDiv.attributes.type.value = "password" ;
}
console.info("==count===" + count);
count ++ ;
/* count已经做了修改,要重新修改后再放进去 */
passDiv.attributes.count.value = count ;
}
</script>
</head>
<body>
<!-- 说明此提交要提交给谁 -->
<form action="https://www.baidu.com" method="get" οnsubmit="return testVal()">
<table border="1">
<tr>
<td>邮箱</td>
<td><input type="text" id="email" name="email"></td>
<td><div class="info">请输入邮箱</div></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username"></td>
<td><div class="info">请输入用户名</div></td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" id="password" name="password" count="0">
<img src="eye.jpg" class="eye" οnclick="showPass('password')" alt="点击显示密码" title="点击显示密码">
</td>
<td><div class="info">请输入密码</div></td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" id="confirmPass" name="confirmPass" count="0">
<img src="eye.jpg" class="eye" οnclick="showPass('confirmPass')" alt="点击显示密码" title="点击显示密码">
</td>
<td><div class="info" id="confirmPassTip">请输入确认密码</div></td>
</tr>
<tr>
<td>性别</td>
<td colspan="2">
<!--
~为每一个元素起上id
~加上label
~为label加上for
-->
<label for="sex0">
<input type="radio" id="sex0" name="sex" checked="checked" value="0">保密
</label>
<label for="sex1">
<input type="radio" id="sex1" name="sex" value="0">男
</label>
<label for="sex2">
<input type="radio" id="sex2" name="sex" value="2">女
</label>
</td>
</tr>
<tr>
<td>爱好</td>
<td colspan="2">
<label for="hobby-0">
<input type="checkbox" id="hobby-0" name="hobby" value="-1"> 全选
</label>
<!--
~为每一个元素起上id
~加上label
~为label加上for
-->
<label for="hobby0">
<input type="checkbox" id="hobby0" name="hobby"value="0"> 篮球
</label>
<label for="hobby1">
<input type="checkbox" id="hobby1" name="hobby" value="1"> 足球
</label>
<label for="hobby2">
<input type="checkbox" id="hobby2" name="hobby" value="2">书法
</label>
</td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" id="phone" name="phone"></td>
<td><div class="info">请输入手机号</div></td>
</tr>
<tr>
<td>上传头像</td>
<td><input type="file" name="picture"></td>
<td><div class="info">请选择文件</div></td>
</tr>
<tr>
<td>自我介绍</td>
<td colspan="2">
<textarea name="intro" id="intro" cols="40" rows="10"></textarea>
</td>
</tr>
<tr>
<!-- 点击提交本身就有一个操作,
所以一定要return
-->
<!-- <td><input type="submit" value="提交" οnclick="return testVal()"></td> -->
<td><input type="submit" value="提交"></td>
<td colspan="2"><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>
|