<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<!--嵌入JavaScrip的第一种方式
<input type="button" value="hello" onclick="alert('JavaScrip')"/>
<input type="button" value="hello" onclick='alert("JavaScrip?");alert("JavaScrip!")'/>
-->
<!--嵌入JavaScrip的第二种方式 脚本块 自上而下执行 位置不受限制
<script type="text/javascript">
alert('JavaScrip')
</script>
-->
<!--嵌入JavaScrip的第三种方式 引入外部js文件
<script type="/text/javascript" src="js文件路径"></script>
-->
<!--JavaScrip变量
var i = 100;
//一个变量没var声明 他都是全局变量
-->
<!--JavaScrip函数
第一种
function 函数名(形参){
函数体;
}
<script>
function sum(a,b){
alert(a + b);
}
sum(10,20);
</script>
第二种
函数名 = function(形参){
函数体;
}
<script>
sum = function(a,b){
alert(a + b);
}
sum(10,20);
</script>
-->
<!--
alert("abcdefg".substr(2,4));//cdef
substr(startIndex,length)开始位置的元素,包含开始位置元素+长度
alert("abcdefg".substring(2,4));//cd
substring(startIndex,endIndex);包含开始位置的元素,但是不包含结束位置的元素
-->
<!--
NaN underfined null三个值有什么区别
alert(typeof null); //object
alert(typeof NaN); //number
alert(typeof underfined);//underfined
null和underfined 等同
==等同只判断值是否相等 ===全等判断值又判断数据类型
-->
<script type="text/javascript">
window.onload = function(){
//给用户文本框绑定blur事件
//获取span标签
var usernameerrorSpan = document.getElementById("usernameerror");
var usernameElt = document.getElementById("username");
usernameElt.onblur = function(){
//获取用户名
var username = usernameElt.value;
//去除空白
username = username.trim();
if(username === ""){
usernameerrorSpan.innerText = "用户名不能为空";
}else{
if(username.length<6 || username.length>14){
usernameerrorSpan.innerText = "用户名长度必须大于6且小于14";
}else{
var regExp = /^[A-Za-z0-9]+$/;
var ok =regExp.test(username);
if(ok){
}else{
usernameerrorSpan.innerText = "用户名不能为特殊字符";
}
}
}
}
//给username文本框绑定焦点事件
usernameElt.onfocus = function(){
if(usernameerrorSpan.innerText != ""){
usernameElt.value = "";
}
usernameerrorSpan.innerText = "";
}
var passworderrorSpan = document.getElementById("password2error");
var password2Elt = document.getElementById("password2");
password2Elt.onblur = function(){
var passwordElt = document.getElementById("password");
var password = passwordElt.value;
var password2 = password2Elt.value;
if(password != password2){
passworderrorSpan.innerText = "密码不一致";
}else{
}
}
password2Elt.onfocus = function(){
if(passworderrorSpan.innerText != ""){
password2Elt.value = "";
}
passworderrorSpan.innerText = "";
}
var emailSpan = document.getElementById("emailerror");
var emailElt = document.getElementById("email");
emailElt.onblur = function(){
var email = emailElt.value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = emailRegExp.test(email);
if(ok){
}else{
emailSpan.innerText = "邮箱地址不合法";
}
}
emailElt.onfocus = function(){
if(emailSpan.innerText != ""){
emailElt.value = "";
}
emailSpan.innerText = "";
}
var BtnElt = document.getElementById("Btn");
Btn.onclick = function(){
//使用纯JS代码触发事件
usernameElt.focus();
usernameElt.blur();
password2Elt.focus();
password2Elt.blur();
emailElt.focus();
emailElt.blur();
if(usernameerrorSpan.innerText == "" && passworderrorSpan.innerText == "" && emailSpan.innerText == ""){
var userFormElt = document.getElementById("userForm");
userFormElt.submit();
}
}
}
</script>
<form id="userForm" action="http://localhost:8080/jd/save" method="get">
用户名<input type="text" name="username" id="username" /><span id="usernameerror"></span><br />
密码<input type="text" name="password" id="password" /><br />
确认密码<input type="text" id="password2" /><span id="password2error"></span><br />
邮箱<input type="text" name="email" id="email" /><span id="emailerror"></span><br />
<input type="button" value="注册" id="Btn" />
<input type="reset" value="重置" />
</form>
</body>
</html>
JavaScrip一些笔记和表单验证例子
最新推荐文章于 2024-09-07 13:38:28 发布