1.innerHTML用户登录验证：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
function check(fm) {
var username = fm.username.value;// 用户名的值
var pwd = fm.pwd.value;
var flagUser = true;
var flagPwd = true;
var flag = true;
var error = document.getElementById("error_pwd");
if(username.length < 6 || username.length > 20) {
document.getElementById("error_user").innerHTML = "您的用户名格式错误！";
flagUser = false;
} else {
document.getElementById("error_user").innerHTML = "";
flagUser = true;
} if(pwd.length < 6 || pwd.length > 20) { error.style.color = "red";// 是操作style样式，不是又定义了一个样式，把颜色赋值为red；--->选中标签进行修改style的样式
error.innerHTML = "您的密码格式错误";
flagPwd = false;
} else {
error.style.color = "green";
error.innerHTML = "您的密码格式正确";
flagPwd = true;
}
}
</script> </head> <body>
<form onsubmit="return check(this);">
用户名：<input type="text" name="username" onblur="check" />
<span id="error_user"dsadsawewq></span><br />
密码：<input type="password" name="pwd" />
<span id="error_pwd"></span><br />
<input type="submit" value="提交" /> </form>
</body>
</html>
2.form表单method：post和get
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script> </script> </head> <body>
<!--
网址和携带的参数以?隔开，两个参数之间用&连接
form表单有method属性：get post，如果不写method属性默认为get方法
get和post都是通过form表单进行传递参数
get:通过地址栏进行传递参数，参数会直接显示在地址栏中
post:会把需要传递的参数和地址合并，也就是封装在地址中进行传递，参数不会显示在地址栏中 只要涉及到用户安全(登录，注册，修改密码，修改用户信息，支付...)必须要用post
-->
<form action="top.html" method="post">
用户名：<input type="text" name="username" />
密码：<input type="password" name="pwd" />
<input type="submit" value="提交" />
</form> <a href="top.html?username=zhangsan&pwd=123456">跳转</a><!-- a标签用的是get方法，a标签不支持post方法 -->
</body>
</html>
3.单选框值得获取：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
function check(fm) {
var username = fm.username.value;
var pwd = fm.pwd.value;
var repwd = fm.repwd.value;
var sex = fm.sex;// 单选框对象数组
var usernameFlag = true;
var pwdFlag = true;
var repwdFlag = true;
var sexFlag = true; if(username.length < 6 || username.length > 20) {
// 错误
//alert("用户名错误");
usernameFlag = false;
} else {
//alert("用户名正确"); }
if(pwd.length < 6 || pwd.length > 20) {
// 错误
pwdFlag = false;
} else { } if(repwd != pwd) {
// 错误
repwdFlag = false;
} else { } for(var i = 0; i < sex.length; i++) {
alert(sex[i].value);
if(sex[i].checked) {// 是有被选中的
// 正确
sexFlag = true;
break;
} else {
sexFlag = false;
}
} if(sexFlag) {
alert("我进来了");
} else {
alert("请选择性别!");
} return usernameFlag&&pwdFlag&&repwdFlag&&sexFlag; }
</script> </head> <body>
<h1>用户注册</h1>
<form action="top.html" method="post" onsubmit="return check(this);">
<b style="color:red;">*</b>用户名：<input type="text" name="username" /><br />
<b style="color:red;">*</b>密码：<input type="password" name="pwd" /><br />
<b style="color:red;">*</b>重复密码：<input type="password" name="repwd" /><br />
<b style="color:red;">*</b>性别：<input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="female" />女 <input type="radio" name="sex" value="secret" />保密<br />
身份证号：<input type="text" name="idcard" /><br /> <input type="submit" value="提交" />
</form>
</body>
</html>
4.多选框和下拉列表值得获取：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
function check(fm) {
var username = fm.username.value;// 获取用户名
var hobby = fm.hobby;// 获取多选框对象数组
var uny = fm.university.options;// 获取下拉列表的选项卡的对象数组
var userFlag = true;
var hobbyFlag = true;
var uyFlag = true;
if(username.length < 6 || username.length > 20) {
// 错误
userFlag = false;
alert("用户名格式错误");
} else {
// 正确
userFlag = true;
} var hobbyValue = [];
for(var i = 0; i < hobby.length; i++) {
if(hobby[i].checked) {// 被选中的多选框
hobbyValue[i] = hobby[i].value;// 被选中的多选框的value值
}
} if(hobbyValue.length > 0) {
// 正确
hobbyFlag = true;
} else {
hobbyFlag = false;
alert("爱好为必填项，最少选择一个");
} for(var j = 0; j < uny.length; j++) {
// 会循环所有option
// 如果选择第一个，未选择院校，只需要判断option的value是否等于0
// 如果等于0：未选择，否则就可以通过
if(uny[j].selected) {// 找到选中的选项
//选中了
if(uny[j].value == 0) {
// 错误
alert("请选择你就读的大学");
uyFlag = false;
} else {
// 正确
uyFlag = true;
}
}
} return userFlag&&hobbyFlag&&uyFlag;
}
</script> </head> <body>
<form action="" method="post" onsubmit="return check(this);">
用户名：<input type="text" name="username" /><br />
请选择你的爱好：
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="soccer" />橄榄球
<input type="checkbox" name="hobby" value="basketball" />篮球
<br /> 请选择你就读的大学：
<select name="university">
<option value="0">请选择院校</option>
<option value="qhdx">清华大学</option>
<option value="bjdx">北京大学</option>
<option value="zzdx">郑州大学</option>
<option value="zzsxt">郑州尚学堂</option>
</select>
<br /> <input type="submit" value="提交" />
</form>
</body>
</html>
5.JS中的数组：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script> function teacher(name, age, salary) {
this.name = name;
this.age = age;
this.salary = salary;
this.toSource();
} function test() {
// 定义个数组(两种方式):在js中定义了一个数组，数据类型是不固定的，js中的数组不需要定义长度
// 第一种
var arr1 = new Array();// Array是js的关键字，就是用来定义数组使用的
arr1[0] = "zhangsan";
arr1[1] = 31;
arr1[2] = 1251.13;
alert(arr1); // 第二种
var arr2 = [];
arr2[0] = "lisi";
arr2[1] = "35";
arr2[2] = 2300.22;
arr2[3] = "teacher";
alert(arr2); var arr3 = ["wangwu", 35, 1900.01];
alert(arr3); alert(arr1.concat(arr2));// 把两个数组拼成一个数组，以arr1为起始数组，往后进行拼接----array.concat(array1, array2, array3....);
alert(arr1.join(":"));// 把数组转换为字符串，并以指定的分隔符进行分割，参数一定要带上引号
alert(arr1.pop());// 只删除数组末尾的数据，并返回
alert(arr1);
alert(arr1.push(1300.5));// 往数组最后一位追加一个数据，并返回该数组的长度
alert(arr1.reverse());// 颠倒数组的顺序(eg:本来数组为asc升序，改为desc降序)
alert(arr1.shift());// 删除数组中的第一个元素，并返回
alert(arr1);
alert(arr3.slice(0,2));// 返回指定的位置，前闭后开区间(包含第一个参数所选的元素，不包含第二个参数所选的元素)
alert(arr2.sort());// 对数组进行排序，首先会按数字的大小进行升序，然后按照字母的顺序进行对字符串排序(升序)
// 第一参数：从数组的第几位开始删除，第二参数：删除的多少位(如果为0，不删除)，往后的参数往数组中添加的元素
alert(arr2.splice(0,3,"我是新进来的","1111"));// 因为我在这里打印的是删除的数据
alert(arr2); // 这里不允许使用，特别是生产环境(开发环境，测试环境，生产环境)
var t1 = new teacher("zhangsan", 31, 1000.21);
alert(t1.toSource()); alert(arr2.toLocaleString()); // 和toString效果一样 alert(arr2.unshift("我是新添加的"));// unshift函数必须要有一个参数，往数组的开头添加元素(至少添加一个)，返回新数组的长度
alert(arr2);
alert(arr2.valueOf());// 返回的就是数组的值--->json
} </script> </head> <body>
<input type="button" value="测试" onclick="test();" />
</body>
</html>
6.JS中的正则表达式：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
function check(fm) {
var phoneValue = fm.phone.value;
// 想对手机号进行匹配
// 正则表达式:在js中正则表达式以/^开头，以$/结尾
var reg = /^1[34578]\d{9}$/;// 定义了一个正则表达式
alert(reg.test(phoneValue));// test函数，就是匹配正则表达式的函数，返回值是true或者false
if(reg.test(phoneValue)) {
// 正确
return true;
} else {
// 错误
return false;
} }
</script> </head> <body>
<h1>注册</h1>
<!-- 正则表达式 -->
<form action="" method="post" onsubmit="return check(this);">
手机号：<input type="text" name="phone" /><br />
密码<input type="password" name="pwd" />
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script>
var errorUser = null;// 用户名错误信息
var userFlag = false; function checkUser(user) {
errorUser = document.getElementById("error_user");
var username = user.value;// 获取到用户名的值
var reg = /^[a-zA-Z0-9_]{6,20}$/;
if(reg.test(username)) {
errorUser.innerHTML = "您的用户名格式正确";
errorUser.style.color = "green";
userFlag = true;
} else {
errorUser.innerHTML = "您的用户名格式错误";
errorUser.style.color = "red";
userFlag = false; }
return userFlag;
} function checkPwd() { }
function checkRePwd() { }
function checkPhone() { }
function checkEmail() { } function checkForm() {
return userFlag;
}
</script> </head> <body>
<h1>注册</h1>
<!-- 正则表达式 -->
<!-- 只要需要表单验证的地方，全部使用onsubmit统一验证 -->
<form action="" method="post" name="forms" onsubmit="return checkForm();">
用户名：<input type="text" name="username" onblur="checkUser(this);" />
<span id="error_user"></span>
<br /><!-- this代表的是当前选中input对象 -->
密码：<input type="password" name="pwd" onblur="checkPwd(this);" /><br />
重复密码：<input type="password" name="repwd" onblur="checkRePwd(this);" /><br />
手机号码：<input type="text" name="phone_number" onblur="checkPhone(this);" /><br />
邮箱：<input type="text" name="email" onblur="checkEmail(this);" /><br />
<input type="submit" value="提交" />
<!--<input type="button" value="提交" />--><!-- ajax -->
</form>
</body>
</html>
7.Other：
A：form表单中都有value，可以用.value获取值，其他的可以用innerHTML获取
B：JS中正则以/^开头 以$/结尾，test（）就是匹配正则的函数
C: <option>中没有value时，用.value可以直接获取文本的内容