表单验证：
用户名必填，长度6-20
密码必填，且密码和确认密码需要相同
性别必须要选择
爱好至少要选择1项
学历，必须要选择
备注必填
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script language="javascript">
var pwd = "123456";//数据库取,testing 写个固定值
String.prototype.trim_1=function(){
return this.replace(/(^\s*)|(\s*$)/g,'');
};
function checkUsername(){
var usrname = document.getElementById("username_id");
var usr_v =usrname.value
if(6 <= usr_v.length && 20 >= usr_v.length){
return true;
}
alert("非法用户名!长度有误!");
}
function checkPassword(){
var usr_pwd = document.getElementById("pwd_id");
var pwd_v =usr_pwd.value
if(pwd == pwd_v && 0 < pwd_v.length){
return true;
}
var pwd_length = pwd_v.length;
var v = pwd_length == 0 ? "密码不能为空!":"输入密码不正确!";
alert("密码有误!"+v);
}
function checkBox_hobber(){
var hobber_checkbox = document.getElementsByName("hobber");
for(var i = 0 ; i < hobber_checkbox.length;i++){
//1,0,true,false,null,非空
if(hobber_checkbox[i].checked && hobber_checkbox[i].checked!= ""){
return true;
}
}
}
function checkRadio_sex(){
var sex_radios = document.getElementsByName("sex");
for(var i = 0 ; i < sex_radios.length;i++){
//1,0,true,false,null,非空
if(sex_radios[i].checked && sex_radios[i].checked != ""){
return true;
}
}
}
function checkSelect_degree(){
var degree_select_obj = document.getElementById("degree");
var degree_v = degree_select_obj.value;
if(degree_v && degree_v != "1"){
return true;
}
}
function checkTextArea_ps(){
var textArea_obj = document.getElementById("text_ps");
var textArea_ps_v = textArea_obj.value.trim_1();
if(textArea_ps_v.length > 0 ){
return true;
}
}
function submitForm(){
var form_obj = document.getElementById("myform");
/*if(!checkRadio_sex()){
alert("请您选择性别!");
}
if(!checkBox_hobber()){
alert("请您至少选择一个爱好!");
}
if(!checkSelect_degree()){
alert("请您选择学历!");
}*/
if(!checkTextArea_ps()){
alert("备注不能为空!");
}
//form_obj.submit();
}
</script>
</head>
<body >
<form method="post" action="/servlet" name="formtest" id="myform" >
用户名:<input id="username_id" type="text" name="username" placeholder="用户名长度6-20" οnblur="checkUsername()"/></br>
密码:<input id="pwd_id" type="password" name="password" placeholder="密码不能为空!" οnblur="checkPassword()"/></br>
性别:
男:<input id="" type="radio" name="sex" value="male" />
女:<input id="" type="radio" name="sex" value="female"/></br>
爱好:
运动:<input type="checkbox" name="hobber" value="1"/>
书籍:<input type="checkbox" name="hobber" value="2"/>
电影:<input type="checkbox" name="hobber" value="3"/>
音乐:<input type="checkbox" name="hobber" value="4"/></br>
学历:<select id="degree">
<option value="1">请选择</option>
<option value="2">小学</option>
<option value="3">硕士</option>
<option value="4">博士</option>
<option value="5">无学历！老板</option>
</select>
</br>
<textarea cols="50" rows="20" id="text_ps">
</textarea>
<input type="button" value = "提交表单_手动" οnclick="submitForm()"/>
<input type="submit" value = "提交表单_自动" />
</form>
</body>
</html>
用户名必填，长度6-20
密码必填，且密码和确认密码需要相同
性别必须要选择
爱好至少要选择1项
学历，必须要选择
备注必填
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script language="javascript">
var pwd = "123456";//数据库取,testing 写个固定值
String.prototype.trim_1=function(){
return this.replace(/(^\s*)|(\s*$)/g,'');
};
function checkUsername(){
var usrname = document.getElementById("username_id");
var usr_v =usrname.value
if(6 <= usr_v.length && 20 >= usr_v.length){
return true;
}
alert("非法用户名!长度有误!");
}
function checkPassword(){
var usr_pwd = document.getElementById("pwd_id");
var pwd_v =usr_pwd.value
if(pwd == pwd_v && 0 < pwd_v.length){
return true;
}
var pwd_length = pwd_v.length;
var v = pwd_length == 0 ? "密码不能为空!":"输入密码不正确!";
alert("密码有误!"+v);
}
function checkBox_hobber(){
var hobber_checkbox = document.getElementsByName("hobber");
for(var i = 0 ; i < hobber_checkbox.length;i++){
//1,0,true,false,null,非空
if(hobber_checkbox[i].checked && hobber_checkbox[i].checked!= ""){
return true;
}
}
}
function checkRadio_sex(){
var sex_radios = document.getElementsByName("sex");
for(var i = 0 ; i < sex_radios.length;i++){
//1,0,true,false,null,非空
if(sex_radios[i].checked && sex_radios[i].checked != ""){
return true;
}
}
}
function checkSelect_degree(){
var degree_select_obj = document.getElementById("degree");
var degree_v = degree_select_obj.value;
if(degree_v && degree_v != "1"){
return true;
}
}
function checkTextArea_ps(){
var textArea_obj = document.getElementById("text_ps");
var textArea_ps_v = textArea_obj.value.trim_1();
if(textArea_ps_v.length > 0 ){
return true;
}
}
function submitForm(){
var form_obj = document.getElementById("myform");
/*if(!checkRadio_sex()){
alert("请您选择性别!");
}
if(!checkBox_hobber()){
alert("请您至少选择一个爱好!");
}
if(!checkSelect_degree()){
alert("请您选择学历!");
}*/
if(!checkTextArea_ps()){
alert("备注不能为空!");
}
//form_obj.submit();
}
</script>
</head>
<body >
<form method="post" action="/servlet" name="formtest" id="myform" >
用户名:<input id="username_id" type="text" name="username" placeholder="用户名长度6-20" οnblur="checkUsername()"/></br>
密码:<input id="pwd_id" type="password" name="password" placeholder="密码不能为空!" οnblur="checkPassword()"/></br>
性别:
男:<input id="" type="radio" name="sex" value="male" />
女:<input id="" type="radio" name="sex" value="female"/></br>
爱好:
运动:<input type="checkbox" name="hobber" value="1"/>
书籍:<input type="checkbox" name="hobber" value="2"/>
电影:<input type="checkbox" name="hobber" value="3"/>
音乐:<input type="checkbox" name="hobber" value="4"/></br>
学历:<select id="degree">
<option value="1">请选择</option>
<option value="2">小学</option>
<option value="3">硕士</option>
<option value="4">博士</option>
<option value="5">无学历！老板</option>
</select>
</br>
<textarea cols="50" rows="20" id="text_ps">
</textarea>
<input type="button" value = "提交表单_手动" οnclick="submitForm()"/>
<input type="submit" value = "提交表单_自动" />
</form>
</body>
</html>
1653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
