- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>学生基本信息的输入</title>
- <meta http-equiv="content-type" content="text/html;charset = utf-8">
- <link rel="stylesheet" >
- <style>
- body {
- background-color: #e7edf0;
- }
- </style>
- <script type="text/javascript" src1="./jq.js"></script>
- </head>
- <body>
- <div align="center">
- <form id="input_form">
- <h2 style="font-size: 150%">基本信息填写</h2>
- <table id="input_table">
- <tr>
- <td align="right" height="30" width="100px">
- <label>姓 名:</label>
- </td>
- <td align="left" class=":required">
- <input type="text" id="UserName" class="required">
- </td>
- </tr>
- <tr>
- <td align="right" height="30">学 号:</td>
- <td align="left">
- <input type="text" id="SID" class="required">
- </td>
- <td></td>
- </tr>
- <tr>
- <td align="right" height="30">性 别:</td>
- <td align="left">
- <!--只能选择一个 value的用处默认为男生-->
- <input type="radio" id="user_male" name="sex" value="1" checked>男
- <input type="radio" id="user_female" name="sex" value="0">女
- </td>
- <td></td>
- </tr>
- <tr>
- <td align="right" height="30">出生年月:</td>
- <td align="left">
- <label>
- <select name="dd" title="年">
- <option label="1993"></option>
- <option label="1992"></option>
- <option label="1991"></option>
- <option label="1990" selected></option>
- <option label="1989"></option>
- <option label="1988"></option>
- </select>
- </label>
- 年
- <select name="dd" title="月">
- <option label="1"></option>
- <option label="2"></option>
- <option label="3"></option>
- <option label="4"></option>
- <option label="5"></option>
- <option label="6"></option>
- <option label="7"></option>
- <option label="8"></option>
- <option label="9"></option>
- <option label="10"></option>
- <option label="11"></option>
- <option label="12"></option>
- </select>
- 月
- </td>
- <td></td>
- </tr>
- <tr>
- <td align="right" height="30">学 院:</td>
- <td align="left">
- <input type="text" id="user_xueyuan">
- </td>
- <td></td>
- </tr>
- <tr>
- <td align="right" height="30">专 业:</td>
- <td align="left">
- <input type="text" id="user_major">
- </td>
- <td></td>
- </tr>
- <tr>
- <td align="right" height="30">爱 好:</td>
- <td align="left">
- <input type="checkbox" id="sports" name="hobby[]" value="1"/>运动
- <input type="checkbox" id="music" name="hobby[]" value="2"/>音乐
- <input type="checkbox" id="art" name="hobby[]" value="3"/>艺术
- </td>
- <td></td>
- </tr>
- <tr>
- <td align="right"></td>
- <td align="left" height="30">
- <input type="checkbox" id="girl" name="hobby[]" value="4"/>泡妞
- <input type="checkbox" id="reading" name="hobby[]" value="5"/>读书
- <input type="checkbox" id="games" name="hobby[]" value="6"/>游戏
- </td>
- <td></td>
- </tr>
- <tr>
- <td align="right">个人简介:</td>
- <td align="left">
- <textarea rows="5" tip="请输入您的个人简介" cols="19" id="introduce" style="font-color: gray;font-size: 80%">请输入您的个人简介:</textarea>
- </td>
- <td></td>
- </tr>
- <tr>
- <td align="right"></td>
- <td align="left" height="30">
- <!--通过提交按钮检测所有输入的正确性-->
- <input type="button" id="submit" value="确定">
- <!--进行清空操作-->
- <input type="reset" id="clear" value="重置">
- </td>
- <td></td>
- </tr>
- </table>
- </form>
- </div>
- </body>
- </html>
- <script>
- $(document).ready(function () {
- // 做一个验证只能选择三个兴趣爱好的验证
- $('input[type=checkbox]').click(function () {
- $("input[name='hobby[]']").attr('disabled', true);
- if ($("input[name='hobby[]']:checked").length >= 3) {
- $("input[name='hobby[]']:checked").attr('disabled', false);
- } else {
- $("input[name='hobby[]']").attr('disabled', false);
- }
- });
- // 在所有必填项目后面加*
- $('.required').each(function () {
- var $star = $('<span>*</span>');
- $(this).parent().append($star);
- })
- // 下一步判定前把之前的信息清理掉
- $("form :input").blur(function () {
- var $parent = $(this).parent();
- $parent.find('.tip').remove();
- var errorImg = "<img src='../img/error.png'>";
- var acceptImg = "<img src='../img/accept.png'>";
- // 对用户名字进行验证,要求必须是6到10位
- if ($(this).is('#UserName')) {
- if (this.value == "") {
- var errorMsg = " 用户名不能为空";
- $(this).parent().append($("<span class='tip onError'>" + errorImg + errorMsg + "</span>"));
- } else if (this.value.length < 6 || this.value == "") {
- var errorMsg1 = "不能少于六个字符";
- $('#UserName').parent().append($("<span class='tip onError'>" + errorImg + errorMsg1 + "</span>"));
- } else if (this.value.length > 10) {
- var errorMsg2 = "不能超过十个字符";
- $('#UserName').parent().append($("<span class='tip onError'>" + errorImg + errorMsg2 + "</span>"));
- } else {
- var okMsg = "用户名输入正确";
- $parent.append("<span class='tip onSuccess'>" + acceptImg + okMsg + "</span>");
- }
- }
- // 对学号进行验证 ,只能是九位数字
- if ($(this).is('#SID')) {
- if (!/^\\d*$/.test(this.value)) {
- var errorMSG1 = "学号必须数字!";
- $('#SID').parent().append("<span class='tip onError'>" + errorImg + errorMSG1 + "</span>");
- } else if (this.value.length != 9) {
- var errorMSG2 = "学号必须是9位!";
- $('#SID').parent().append("<span class='tip onError'>" + errorImg + errorMSG2 + "</span>");
- } else {
- var okMSG = "学号输入正确!";
- $('#SID').parent().append("<span class='tip onError'>" + acceptImg + okMSG + "</span>");
- }
- }
- // 匹配年龄的选择事件
- if ($(this).is('input[type = "radio"]')) {
- if (this.attr('checked', false)) {
- var errorMSG = "请选择个性别呗!";
- $(this).parent().append("<span class='tip onError'>" + errorMSG + "</span>");
- }
- }
- // 验证学院专业,必须是汉字 。可以为空
- if ($(this).is('#user_major')) {
- if (!/(^[\\u4e00-\\u9fa5]*$)/.test(this.value)) {
- var errorMSG = "请正确的填写学院名称";
- $(this).parent().append("<span class='tip onError'>" + errorImg + errorMSG + "</span>");
- }
- }
- if ($(this).is('#user_xueyuan')) {
- if (!/(^[\\u4e00-\\u9fa5]*$)/.test(this.value)) {
- var errorMSG = "请正确的填写专业名称";
- $(this).parent().append("<span class='tip onError'>" + errorImg + errorMSG + "</span>");
- }
- }
- // 匹配第一格被匹配到的事件来模拟blur
- }).keyup(function () {
- $(this).triggerHandler("blur");
- }).focus(function () {
- $(this).triggerHandler("blur")
- });
- });
- </script>
- //该片段来自于http://www.codesnippet.cn/detail/121020136361.html
来源: http://www.codesnippet.cn/detail/121020136361.html