创建html表单，有格式要求和必填项要求

最新推荐文章于 2023-11-20 16:38:06 发布

s_x_x

最新推荐文章于 2023-11-20 16:38:06 发布

阅读量3.7k

点赞数 3

分类专栏：表单

本文链接：https://blog.csdn.net/u011053624/article/details/9263313

版权

表单专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单注册</title>
<script type="text/javascript">
function checkUser(node)
{
	var name=node.value;
	var reg=/^[a-z_][\w\d_]+$/i;
	var spanNode=document.getElementById('userspan');
	if(reg.test(name))
	{
		spanNode.innerHTML="用户名正确".fontcolor('green');
	}
	else
	{
		spanNode.innerHTML="用户名错误".fontcolor('red');
	}
}
function checkPsw(node)
{
	var psw=node.value;
	var reg=/^[\w\d_]{6,16}$/i;
	var spanNode=document.getElementById('pswspan');
	if(reg.test(psw))
	{
		spanNode.innerHTML="密码格式正确".fontcolor('green');
	}
	else
	{
		spanNode.innerHTML="密码格式错误".fontcolor('red');
	}
}
function rcheckPsw(node)
{
	var psw=document.getElementById("psw").value;//获取设置密码的值
	if (psw=="")
	{
 		document.getElementById("rpswspan").innerHTML="请先设置密码！".fontcolor('red');
		return ;
	}
	var rpsw=node.value;
	var spanNode=document.getElementById('rpswspan');
	if(rpsw==psw)
	{
		spanNode.innerHTML="密码正确".fontcolor('green');
	}
	else
	{
		spanNode.innerHTML="请重新确认密码".fontcolor('red');
	}
}
function tijiao()
{
        if(document.getElementById("user").value==""){ alert("请填写用户名！"); return; }
        if(document.getElementById("psw").value==""){ alert("请填写密码！"); return; }
		if(document.getElementById("rpsw").value==""){ alert("请确认密码！"); return; }
		if((form1.info[0].checked==false)&&(form1.info[1].checked==false)){ alert("请选择性别！"); return; }
		if(document.getElementById("city").value=="none"){ alert("请选择城市！"); return; }
		var flag=aihao();
		if(flag==false) return;
		if(document.getElementById("introduction").value==""){ alert("请填写个人简介！"); return; }
		alert("已成功提交您的注册信息！"); return;
}
function aihao()
{
		for(var i=0; i<9; i++) 
		{
			if(form1.ho[i].checked==true) return true;
		}
		alert("请至少选择一个爱好！"); return false;
}
</script>
</head>

<body>
<!-- 
编写HTML注册表单, 需要：用户名, 密码, 确认密码, 性别，省份, 兴趣爱好，个人简介。
使用JavaScript验证这个HTML表单，要求：
用户名: 必须是字母数字或下划线，不能以数字开头。
密码: 6-16位字母数字下划线。
确认密码与设置的密码一致。
其他为必填项
-->
<form name="form1">
<div align="center">
  <table  style="border:3px red solid;width:200;height:100;" >
  	<tr>用户注册</tr>
    <tr>
      <th>用户名<font size="2" style="font-weight: normal;">（必须是6-16位字母数字或下划线）</font></th>
      <th width="168"><div align="left">
        <input type="text" name="user" id="user" οnblur="checkUser(this)"/>
        <span id="userspan"> </span></div></th>
    </tr>
    <tr>
      <th>请输入密码<font size="2" style="font-weight: normal;">（必须是6-16位字母数字或下划线）</font></th>
      <th><div align="left">
        <input type="password" name="psw" id="psw" οnblur="checkPsw(this)"/>
        <span id="pswspan"> </span></div></th>
    </tr>
    <tr>
      <th>请确认密码</th>
      <th><div align="left">
        <input type="password" name="rpsw" id="rpsw" οnblur="rcheckPsw(this)"/>
        <span id="rpswspan"> </span></div></th>
    </tr>
    <tr>
      <th>性别</th>
      <th width="300"><div align="left">
      <div>
        <input type="radio" name="info"  value="male"/><font style="font-weight: normal;">男</font>
        <input type="radio" name="info"  value="female"/><font style="font-weight: normal;">女</font>
        </div></th>
    </tr>
    <tr>
      <th>所在城市</th>
      <th><div align="left">
      		<select name="city" id="city">
            <option value="none">请选择城市</option>
            <option value="ah">安徽</option>
            <option value="bj">北京</option> 
            <option value="cq">重庆</option> 
            <option value="fj">福建</option> 
            <option value="gs">甘肃</option> 
            <option value="gd">广东</option> 
            <option value="gx">广西</option> 
            <option value="gz">贵州</option> 
            <option value="hain">海南</option> 
            <option value="hebei">河北</option> 
            <option value="hlj">黑龙江</option> 
            <option value="henan">河南</option> 
            <option value="hubei">湖北</option> 
            <option value="hunan">湖南</option> 
            <option value="js">江苏</option> 
            <option value="jx">江西</option> 
            <option value="jl">吉林</option> 
            <option value="ln">辽宁</option> 
            <option value="nx">宁夏</option> 
            <option value="nmg">内蒙古</option> 
            <option value="qh">青海</option> 
            <option value="sh">上海</option> 
            <option value="sx">山西</option> 
            <option value="sd">山东</option> 
            <option value="sc">四川</option> 
            <option value="sx3">陕西</option> 
            <option value="tj">天津</option> 
            <option value="xz">西藏</option> 
            <option value="xj">新疆</option> 
            <option value="yn">云南</option> 
            <option value="zj">浙江</option> 
            <option value="tw">台湾</option>
            <option value="hk">香港</option>
            <option value="mc">澳门</option>
            <option value="else">其他</option>
            </select>
            </div>
      </th>
    </tr>
    <tr>
      <th>兴趣爱好</th>
      <th><div align="left">
            <input type="checkbox" name="ho" /> <font style="font-weight: normal;">运动
            <input type="checkbox" name="ho" /> 看电影
            <input type="checkbox" name="ho" /> 读书<br />
            <input type="checkbox" name="ho" /> 画画
            <input type="checkbox" name="ho" /> 唱歌
            <input type="checkbox" name="ho" /> 编程 <br />
            <input type="checkbox" name="ho" /> 旅游
            <input type="checkbox" name="ho" /> 逛街
            <input type="checkbox" name="ho" /> 其他</font>
            </div>
      </th>
    </tr>
    <tr>
      <th>个人简介</th>
      <th><div align="left"><input type="text" name="introduction" id="introduction" style="width:200px;height:100px"/></div></th>
  </table>
<tr>
    <td colspan="2" align="center">
        <input name="按钮" type="button" οnclick="tijiao()" value="提交"/>
            
        <input name="重置" type="reset"  value="清空" />
    </td>
</tr>
</div>
</form>
</body>
</html>

外观效果是：（但在这个页面里没有实现校验，把代码另存html文件就可以实现所有功能）

用户注册

用户名（必须是6-16位字母数字或下划线）
请输入密码（必须是6-16位字母数字或下划线）
请确认密码
性别	男女
所在城市
兴趣爱好	运动看电影读书画画唱歌编程旅游逛街其他
个人简介

s_x_x

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
创建html表单，有格式要求和必填项要求

表单注册function checkUser(node){ var name=node.value; var reg=/^[a-z_][\w\d_]+$/i; var spanNode=document.getElementById('userspan'); if(reg.test(name)) { spanNode.innerHTML="用户名正确".fontcolor('g
复制链接

扫一扫

专栏目录