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可以直接获取文本的内容
java：JavaScript3（innerHTML，post和get，单选框，多选框，下拉列表值得获取，JS中的数组，JS中的正则）的更多相关文章
- php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
- 关于通过jq /js 实现验证单选框 复选框是否都有被选中
今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...
- 使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
- Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...
- iCheck获取单选和复选框的值和文本
//获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...
- MFC_2.1使用单选和多选框
使用单选和多选框 单选 1.拖控件 设置名字,CTRL+D设置顺序,属性设置第一个GROUP为TRUE: 2.设置第一个按钮绑定变量为 值 INT型 名称m_RadioIndxe; 3.设置单击响应内 ...
- jQuery 实现复选框全选、反选及获取选中的值
实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...
- jquery单选框 复选框表格高亮 选中
单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...
- 纯css美化单选、复选框
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- xss过滤方法
用的白名单过滤,是我们的论坛自用的方法,也许考虑不周,欢迎来黑我们的论坛!https://www.ebcms.com/forum.html // 安全过滤 function safe_html($ht ...
- Ubuntu下查看so文件的函数列表
Ubuntu下查看so文件的函数列表 可使用如下命令: 1.nm -D XXX.so 2.objdump -tT XXX.so nm libcyusb.so | grep "usb ...
- Java常用类库——观察者设计模式
观察者设计模式 现在很多的购房者都在关注着房子的价格变化,每当房子价格变化的时候,所有的购房者都可以观察得到.实际上以上的购房者都属于观察者,他们都关注着房子的价格. 如果要想实现观察者模式,则必须依 ...
- Android 热修复 Tinker platform 中的坑，以及详细步骤（二）
操作流程: 一.注册平台账号: http://www.tinkerpatch.com 二.查看操作文档: http://www.tinkerpatch.com/Docs/SDK 参考文档: https ...
- C++内存泄漏的几种情况
1. 在类的构造函数和析构函数中没有匹配的调用new和delete函数 两种情况下会出现这种内存泄露:一是在堆里创建了对象占用了内存,但是没有显示地释放对象占用的内存:二是在类的构造函数中动态的分配了 ...
- AtCoder AGC017C Snuke and Spells
题目链接 https://atcoder.jp/contests/agc017/tasks/agc017_c 题解 很久前不会做看了题解,现在又看了一下,只想说,这种智商题真的杀我... 转化成如果现 ...
- A. Detective Book
A. Detective Book time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...
- Mysql 里CHAR和VARCHAR的最大长度及一些注意事项
先写出结论: Mysql 5中 非空CHAR的最大总长度是255[字节]:非空VARCHAR的最大总长度是65533[字节]. 可空CHAR的最大总长度是254[字节]:可空VARCHAR的最大总长度 ...
- mysql 查询一个月的数据
//今天 select * from 表名 where to_days(时间字段名) = to_days(now()); //昨天 SELECT * FROM 表名 WHERE TO_DAYS( NO ...