这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 两种类型的表单提交方法, 结合实例形式分析了 2 种常用的表单提交验证的实现技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
本文实例分析了 JS 两种类型的表单提交方法。分享给大家供大家参考,具体如下:
1. 原始的
- <form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();">
- <button type="submit" class="button red" style="font-size:18px; font-family:'微软雅黑';">
- 提 交
- </button>
这里的 button 提交之后,执行 subForm() 方法,subForm 可以对表单进行验证,返回 false,表单不提交。否则提交。
- function subForm() {
- var flag = true;
- $(".required").each(function() {
- if (!$(this).val()) {
- flag = false;
- $(this).CSS({
- border: "1px solid #F56939",
- borderRadius: "5px",
- color: "#F56939",
- height: "26px"
- });
- $(this).attr("status", "1").val("此处为必填项,请您填写!");
- }
- });
- /*$(".idCardNo").each(function(){
- if(!idCardNo($(this).val()))
- {
- flag = false;
- $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
- if($(this).attr("status")!=1){
- $(this).attr("status","1").val("请填写正确的身份证号码!");
- }
- }
- });*/
- var reg = new RegExp("^[0-9]*$");
- $(".number").each(function() {
- if (!reg.test($(this).val())) {
- flag = false;
- $(this).css({
- border: "1px solid #F56939",
- borderRadius: "5px",
- color: "#F56939",
- height: "26px"
- });
- if ($(this).attr("status") != 1) {
- $(this).attr("status", "1").val("请填写正确的联系电话!");
- }
- }
- });
- $(".exCardNo").each(function() {
- if (exCardNo($(this).val()) == 1) {
- flag = false;
- $(this).css({
- border: "1px solid #F56939",
- borderRadius: "5px",
- color: "#F56939",
- height: "26px"
- });
- if ($(this).attr("status") != 1) {
- $(this).attr("status", "1").val("此身份证已报名!");
- }
- }
- });
- return flag;
- }
各种验证!
2.js 设置的提交
- <form method="post" action="/student/stureg/reglogin" id="form_login">
- <a id="submit">
- <img src="/images/login/login_bt.png" style="cursor:pointer" />
- </a>
这里并不是提交按钮,而是一个模拟提交的按钮。
- $("#submit").click(function(){
- if(loginForm())
- {
- $("#form_login").submit();
- }
- });
触发提交事件,这里用
onsubmit="return loginForm();" 就没效果了,不管是否返回 false 都会提交。所以要在真正提交之前,做一下验证。
- function loginForm() {
- var flag = true;
- $(".notnull").each(function() {
- if (!$(this).val()) {
- flag = false;
- $(this).css({
- border: "1px solid #F56939",
- borderRadius: "5px",
- color: "#F56939",
- height: "26px"
- });
- $(this).attr("status", "1").val("不能为空");
- }
- });
- return flag;
- }
返回 false,就不调用 submit 方法。
这就是两种处理表单提交前奏的方式。
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0601/330111.html