java：JavaScript3（innerHTML，post和get，单选框，多选框，下拉列表值得获取，JS中的数组，JS中的正则）
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可以直接获取文本的内容
