这篇文章主要为大家详细介绍了 javascript 表单事件处理方法,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
1、访问表单对象的常用方法:
①:根据 <form> 元素的 id 属性;
var myform=document.getElementById("myformid"); //myformid 是某个 <form> 元素的 ID;
②:根据 <form> 元素的 name 属性;
var myform=document.forms["myformname"]; //myformname 是某个 <form> 元素的名称;
③:直接使用表单名访问表单:
var myform=document.myformname;//myformname 是某个 <form> 元素的名称;
2、表单的常用事件:
①onsubmit 事件:点击 "提交" 按钮的时候会触发此事件,并且可能阻止表单提交。例:表单的验证;
②onchange 事件:当用户更改内容,并且文本框失去焦点的时候触发此事件;
例:表单提交
前台界面:
前台界面的代码:
- <form name="myform" action="javascript:alert('注册成功!');" method="post"
- onsubmit="return yanzheng();">
- <table width="500px">
- <tbody>
- <tr>
- <td>
- 用户名:
- </td>
- <td>
- <input name="username" id="username" type="text" />
- </td>
- <td align="left">
- <p style="color: #FF0000">
- *用户名长度在6-10之间
- </p>
- </td>
- </tr>
- <tr>
- <td>
- 密 码:
- </td>
- <td>
- <input id="password" onchange="passwordleave()" type="password" />
- </td>
- <td align="left">
- <p style="color: #FF0000">
- *
- <input id="Button1" type="button" value="弱" style="background-color: #FF0000"
- />
- <input id="Button2" type="button" value="中" style="background-color: #FF0000"
- />
- <input id="Button3" type="button" value="强" style="background-color: #FF0000"
- />
- <label id="lavel">
- </label>
- </p>
- </td>
- </tr>
- <tr>
- <td>
- 年 龄:
- </td>
- <td>
- <input id="age" type="text" />
- </td>
- <td align="left">
- <p style="color: #FF0000">
- *
- </p>
- </td>
- </tr>
- <tr>
- <td>
- 性 别:
- </td>
- <td>
- <input name="sex" type="radio" value="男" checked="checked" />
- 男
- <input name="sex" type="radio" value="女" />
- 女
- </td>
- <td align="left">
- <p style="color: #FF0000">
- *
- </p>
- </td>
- </tr>
- <tr>
- <td>
- 内 容:
- </td>
- <td>
- <input type="checkbox" name="content" value="新闻" />
- 新闻
- <input type="checkbox" name="content" value="娱乐" />
- 娱乐
- <input type="checkbox" name="content" value="教育" />
- 教育
- </td>
- <td align="left">
- <p style="color: #FF0000">
- *
- </p>
- </td>
- </tr>
- <tr>
- <td>
- 学 历:
- </td>
- <td>
- <select name="edu_level" style="width: 74px">
- <option value="1">
- 小学
- </option>
- <option value="2">
- 中学
- </option>
- <option value="3">
- 大学
- </option>
- <option value="4">
- 大学以上
- </option>
- </select>
- </td>
- <td align="left">
- <p style="color: #FF0000">
- *
- </p>
- </td>
- </tr>
- <tr>
- <td>
- 爱 好:
- </td>
- <td>
- <select name="like" size="6" multiple="multiple" style="width: 72px; height: 108px">
- <option value="1">
- 篮球
- </option>
- <option value="2">
- 足球
- </option>
- <option value="3">
- 排球
- </option>
- <option value="4">
- 跑步
- </option>
- <option value="5">
- 登山
- </option>
- <option value="6">
- 健美
- </option>
- </select>
- </td>
- <td align="left">
- <p style="color: #FF0000">
- *
- </p>
- </td>
- </tr>
- <tr>
- <td>
- <input id="Button4" type="button" onclick="checkinfo()" value="查看信息" />
- </td>
- <td>
- <input type="submit" name="tijiao" value="注册" />
- </td>
- <td>
- <input type="reset" name="reset" value="重置" />
- </td>
- </tr>
- </tbody>
- </table>
- </form>
JS 脚本:
- <script type="text/javascript">
- function yanzheng() {
- var b;
- var a = document.getElementById("username"); //获取用户名值
- var p = document.getElementById("password"); //获取密码值
- var age = myform.age.value; //获取年龄值
- if (a.value.length < 5 || a.value.length > 10) {
- alert("您输入的用户名格式错误!");
- return false;
- }
- else if (p.value.length < 5) {
- alert("密码长度少于5!");
- return false;
- }
- else if (!checkage(age)) {
- return false;
- }
- else {
- return true;
- }
- }
- function checkage(a) { //检测年龄
- var ch, age;
- for (var i = 0; i < a.length; i++) {
- ch = a.charAt(i);
- if (ch < "0" || ch > "9") {
- alert("请在年龄选项中输入数字!");
- return false;
- }
- }
- age = parseInt(a);
- if (age < 10 || age > 100) {
- alert("年龄不真实!");
- return false;
- }
- return true;
- }
- function checkinfo() { //显示所有的信息
- var username = myform.username.value; //获取用户名
- var password = myform.password.value; //获取密码
- var age = myform.age.value; //获取年龄
- var sex = myform.sex; //获取性别
- var osex = ""; //设置一个变量获取性别的选项
- var content = myform.content; //获取内容
- var ocontent = ""; //设置一个变量获取内容的选项
- var eduleave = myform.edu_level; //获取学历
- var oedu = ""; //设置一个变量获取学历的选项
- var intersent = myform.like; //获取表单爱好
- var olike = ""; //设置一个变量获取爱好的选项
- for (var i = 0; i < sex.length; i++) { //性别
- if (sex[i].checked) {
- osex = sex[i].value;
- }
- }
- for (var i = 0; i < content.length; i++) { //内容
- if (content[i].checked) {
- ocontent += content[i].value + " ";
- }
- }
- for (var i = 0; i < eduleave.length; i++) { //学历
- if (eduleave.selectedIndex >= 0) {
- oedu = eduleave.options[eduleave.selectedIndex].text;
- }
- }
- for (var i = 0; i < intersent.length; i++) { //爱好
- if (intersent.options[i].selected) {
- olike += intersent.options[i].text + " ";
- }
- }
- alert("您的用户名为:" + username + "\n密码为:" + password + "\n年龄为:" + age + "\n性别为:" + osex + "\n内容为:" + ocontent + "\n学历为:" + oedu + "\n兴趣爱好为:" + olike);
- }
- function passwordleave() {
- var passwordleavel = myform.password.value;
- if (passwordleavel.length == "") {
- document.getElementById("Button1").style.display = "none";
- document.getElementById("Button2").style.display = "none";
- document.getElementById("Button3").style.display = "none";
- }
- else {
- if (passwordleavel.length <= "5") {
- document.getElementById("Button1").style.display = "";
- document.getElementById("Button2").style.display = "none";
- document.getElementById("Button3").style.display = "none";
- }
- else if (passwordleavel.length <= "10") {
- document.getElementById("Button1").style.display = "";
- document.getElementById("Button2").style.display = "";
- document.getElementById("Button3").style.display = "none";
- }
- else {
- document.getElementById("Button1").style.display = "";
- document.getElementById("Button2").style.display = "";
- document.getElementById("Button3").style.display = "";
- }
- }
- }
- function startbody() {
- document.getElementById("Button1").style.display = "none";
- document.getElementById("Button2").style.display = "none";
- document.getElementById("Button3").style.display = "none";
- }
- </script>
这个案例只是一些常规的做法,不涉及什么技术,只是为了下次方便使用。
来源: http://www.phperz.com/article/17/0331/265764.html