知向前端
首页
微语
登录
js表单验证简单实例
2015-3-20 Jon
用户登录格式的表单验证
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>简洁用户登录</title><br /> <style><br /> #Form{<br /> margin:0 auto;<br /> width: 500px;<br /> }<br /> #Form input[type=text],#Form input[type=password]{<br /> width: 150px;<br /> height: 20px;<br /> }<br /> .operation{<br /> text-align: center;<br /> }<br /> </style><br /> </head><br /> <body><br /> <form action="" method="post" onsubmit="return check();" id="Form"><br /> <h1>用户登陆</h1><br /> <p><br /> <label for="username">用户名：</label><br /> <input type="text" id="username" /><span id="info">用户名不为空且大于六位</span></p><br /> <p><label for="password">密 码：</label><br /> <input type="password" id="password" /></p><br /> <p class="operation"><br /> <input type="submit" value="提交" /> <input type="reset" onclick="cancel()" value="清空" /></p><br /> </form><br /> <script><br /> var info=document.getElementById('info');<br /> function check() {<br /> //验证用户名<br /> var username = document.getElementById("username");<br /> if (username.value.length == 0) {<br /> info.innerHTML='用户名不能为空！'<br /> return false;<br /> }<br /> if (username.value.length < 6) {<br /> info.innerHTML='用户名不能小于6位'<br /> return false;<br /> }<br /> }<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
注册格式的表单验证
<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <head><br /> <title>用户注册</title><br /> <meta charset="utf-8" /><br /> <script><br /> window.onload=function(){<br /> console.log(111);<br /> var pTextarea=document.getElementById('pTextarea');<br /> pTextarea.innerHTML='<textarea id="intro" style="width:150px;height:50px"><\/textarea>';<br /> }<br /> </script><br /> <script src="https://yuanqiao.pw/yqiao/static/js/form_check.js"></script><br /> </head><br /> <body><br /> <form action="" method="post" onsubmit="return check();" id="Form"><br /> <table border="1" bordercolor="green" cellspacing="1" cellpadding="1" align="left" width="500"><br /> <tr><br /> <td colspan="2" align="center"><br /> <font size="5" color="green"><b>用户注册</b><br /> </font><br /> </td><br /> </tr><br /> <tr><br /> <td align="right">用户名：</td><br /> <td><br /> <input type="text" id="username" style="width:150px;height:20px" /><br /> </td><br /> </tr><br /> <tr><br /> <td align="right">密 码：</td><br /> <td><br /> <input type="password" id="password" style="width:150px;height:20px" /><br /> </td><br /> </tr><br /> <tr><br /> <td align="right">确认密码：</td><br /> <td><br /> <input type="password" id="qrpassword" style="width:150px;height:20px" onpaste="return false" /> <br /> <font color="red">警告：</font>禁止粘贴</td><br /> </tr><br /> <tr><br /> <td align="right">身份证号：</td><br /> <td><br /> <input type="text" id="idcard" style="width:150px;height:20px" /><br /> </td><br /> </tr><br /> <tr><br /> <td align="right">性 别：</td><br /> <td>男<br /> <input type="radio" id="sex" name="sex" value="boy" checked/>女<br /> <input type="radio" name="sex" id="sex" value="girl" /><br /> </td><br /> </tr><br /> <tr><br /> <td align="right">出生日期：</td><br /> <td><br /> <input type="text" id="birthday" style="width:150px;height:20px" /> <br /> <font color="red">YYYY-MM-DD或者YYYY/MM/DD</font><br /> </td><br /> </tr><br /> <tr><br /> <td align="right">籍 贯：</td><br /> <td><br /> <select id="region"><br /> <option value="0">--请选择籍贯--</option><br /> <option value="1">河南省郑州市</option><br /> <option value="2">河南省信阳市</option><br /> <option value="3">北京市海淀区</option><br /> <option value="4">辽宁省大连市</option><br /> <option value="5">广东省深圳市</option><br /> </select><br /> </td><br /> </tr><br /> <tr><br /> <td align="right">爱 好：</td><br /> <td><br /> <input type="checkbox" id="hobby" name="hobby" value="music" checked="true" />音乐<br /> <input type="checkbox" id="hobby" name="hobby" value="basketball" />篮球<br /> <input type="checkbox" id="hobby" name="hobby" value="visitor" />旅游<br /> <input type="checkbox" id="hobby" name="hobby" value="sleep" />睡觉<br /> <font color="red">*</font><br /> <input type="checkbox" id="all" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" id="no" name="no" onclick="checknoAll()" />反选</td><br /> </tr><br /> <tr><br /> <td align="right">邮 箱：</td><br /> <td><br /> <input type="text" id="email" style="width:150px;height:20px" /><br /> </td><br /> </tr><br /> <tr><br /> <td align="right">手机号码：</td><br /> <td><br /> <input type="text" id="tel" style="width:150px;height:20px" /><br /> </td><br /> </tr><br /> <tr><br /> <td align="right">自我介绍：</td><br /> <td id="pTextarea"><br /> </td><br /> </tr><br /> <tr><br /> <td colspan="2" align="right"><br /> <input type="submit" value="提交注册信息"><br /> <input type="reset" onclick="cancel()" value="全部清空"><br /> </td><br /> </tr><br /> </table><br /> </form><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
评论：
Jon
2023-01-30 13:08
回复
@山地大魔王：你可以看下阿里云虚拟主机，一年才几十块钱
山地大魔王
2023-01-30 10:08
回复
没想到你的网站开那么长的时间了呢，你用的是那家提供的云服务器呢。我感觉阿里云服务器有点贵呢
发表评论：
昵称
邮件地址 (选填)
个人主页 (选填)
内容