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

原创 于 2013-07-07 14:57:54 发布 · 3.8k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文概述了AI音视频处理领域的关键技术，包括视频分割、语义识别、自动驾驶、AR、SLAM等，并探讨了其在实际应用中的作用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


<!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" onblur="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" onblur="checkPsw(this)"/>
        <span id="pswspan"> </span></div></th>
    </tr>
    <tr>
      <th>请确认密码</th>
      <th><div align="left">
        <input type="password" name="rpsw" id="rpsw" onblur="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" onclick="tijiao()" value="提交"/>
            
        <input name="重置" type="reset"  value="清空" />
    </td>
</tr>
</div>
</form>
</body>
</html>

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

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

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值