`
uule
  • 浏览: 6348950 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

Form的onsubmit

 
阅读更多

1. 

<form class="form" method="post" id="form" onsubmit="return checkForm(this)" action="">
电话号码:<input id="tel" type="text" maxlength="11" name="tel"/>
<button type="submit" name="submit" value="提交"/>
</form>

  

function checkForm(o){ 
   var re=/^(13[0-9]{9})|(15[89][0-9]{8})$/;
   if(!re.test(o.tel.value)){
		alert('请输入正确的手机号码。'); 
		return false; 
	}
}

 

 

发生顺序:onsubmit -> submit

 1.阻止表单提交:

function submitFun(){
    //逻辑判断
    return true; //允许表单提交
    //逻辑判断
    return false;//不允许表单提交
}

<form onsubmit="reture submitFun();"></form>
 //注意此处不能写成 onsubmit="submitFun();"否则将表单总是提交

 

2.

function fun()
{
   alert("form_submit");
}

  

<form onsubmit="fun()">
<input type="submit" id="aaa" value="submit">   <!--能弹出form_submit-->
<input type="button" id="bbb" value="onCliCk_submit" onCliCk="doCument.forms[0].submit()">
<!--
表单会提交,但是不会运行fun() 原因是 onsubmit事件不能通过此种方式触发(在IE环境)
直接用脚本doCumetn.formName.submit()提交表单是不会触发表单的onsubmit()事件的
-->

<input type="button" id="bb1" value="onCliCk_onsubmit" onCliCk="doCument.forms[0].onsubmit()">
<!--会触发fun()参数-->
</form>

 ..

 

分享到:
评论

相关推荐

    js验证form对话框

    &lt;form onsubmit="return validateNotEmpty(input1) && validateNumber(input2) && validatePhoneNumber(input3) && validateEmail(input4)"&gt; 姓名"&gt; 年龄"&gt; 手机号码"&gt; 电子邮件"&gt; 提交 &lt;/form&gt; ``` 以上代码...

    说说回车键触发表单提交的问题

    - **使用`&lt;form onsubmit=""&gt;`**:在`&lt;form&gt;`标签上添加`onsubmit`事件处理函数,可以控制表单提交前后的逻辑。 此外,对于`&lt;textarea&gt;`元素,按下回车键会插入换行符,而非触发表单提交。如果希望在此场景下也响应...

    react-final-form-listeners:components聆听:chequered_flag:React Final Form字段的组件集合

    :chequered_flag: React最终形式的听众 :chequered_flag: React Final Form Listeners是一组有用的组件的集合,这些组件用于侦听表单中的字段 。安装npm install --save ... Form onSubmit = { onSubmit } render = {

    js中return false(阻止)的用法.docx

    &lt;form onsubmit="return chkInput(this);"&gt; &lt;textarea name="content"&gt;&lt;/textarea&gt; 提交" /&gt; &lt;/form&gt; ``` ##### 2.2 阻止链接跳转 在某些情况下,我们希望点击链接时执行某些JavaScript代码而不希望页面跳转,...

    受控表单 vs 不受控表单-案例

    &lt;form onSubmit={this.handleSubmit}&gt; Name: &lt;button type="submit"&gt;Submit &lt;/form&gt; ); } } ``` 在上面的例子中,`handleChange`函数更新了`value`状态,`handleSubmit`函数在表单提交时被调用,显示...

    submit表单提交,onsubmit验证拦截

    submit表单提交,onsubmit验证拦截 免去了用button按钮click点击事件ajax请求

    react-面向复杂场景的中后台表单解决方案UForm

    &lt;form onSubmit={form.onSubmit(handleSubmit)}&gt; &lt;form.Item label="姓名" field="name"&gt; &lt;/form.Item&gt; &lt;form.Item label="邮箱" field="email"&gt; &lt;/form.Item&gt; 提交 &lt;/form&gt; ); }; export default Demo...

    有关html开发的一些注意小事项

    - **无返回值验证**:`onsubmit="validateForm()"`,这种方法不检查函数的返回值,无论`validateForm()`返回什么值,表单都会尝试提交。这意味着如果验证失败(即使`validateForm()`返回`false`),表单仍会被提交。...

    javascript处理表单大全

    &lt;form onsubmit="return test()"&gt; &lt;textarea name="content" cols="40" rows="6"&gt;&lt;/textarea&gt; 检查"&gt; &lt;/form&gt; ``` **2. 限制只能输入汉字** 该功能用于确保用户输入的是汉字,非汉字字符将被移除。 ```html (/...

    基于HTML的用户注册界面

    &lt;form onsubmit="return validateForm()"&gt; ... function validateForm() { var password = document.getElementById("password").value; var confirmPassword = document.getElementById("confirm-password")....

    使用React和Redux的表单变得简单

    &lt;form onSubmit={handleSubmit}&gt; 邮箱" validate={required} /&gt; 密码" validate={[required, minLength8]} /&gt; 注册 &lt;/form&gt; ); export default reduxForm({ form: 'register', })(RegisterForm); ``` 在上述...

    JavaScript的经典表单验证

    &lt;form onsubmit="return validateForm();"&gt; &lt;!-- 表单元素 --&gt; &lt;/form&gt; ``` 除了上述基础验证,还可以实现更复杂的场景,如日期范围验证、电话号码格式验证等。同时,为了提供更好的用户体验,可以使用AJAX异步...

    5.表单验证.doc

    &lt;form onsubmit="return validate()"&gt; &lt;!-- 表单元素 --&gt; &lt;/form&gt; ``` **服务器端验证**则是对客户端验证的补充,即便客户端验证失败,服务器仍会执行验证。在Java Web开发中,这通常通过Servlet实现。例如,`...

    正则表达式

    &lt;form onsubmit="return chkIt(this)"&gt; 提交" /&gt; &lt;/form&gt; ``` **解析:** - `match(/^[0-9]+(\.[0-9]+)?$/)` 正则表达式用于验证输入是否符合只包含数字和一个可选的小数点的规则。 - `replace(/[^0-9.]/g, '')`...

    react-Formcat一种使用ReactContextAPI在React中控制表单的简便方法

    &lt;form onSubmit={handleSubmit}&gt; {/* 表单字段 */} &lt;/form&gt; ); }; ``` 5. **自定义验证:** `Formcat`支持自定义验证规则,你可以在每个字段上设置`validate`属性,定义自己的验证函数: ```jsx const ...

    JavaScript的表单验证

    - `&lt;form onsubmit="return test()"&gt;`:定义了一个表单,并在其`onsubmit`事件中调用`test`函数。这意味着当用户点击提交按钮时会先执行验证函数。 - `&lt;textarea cols="40" wrap="VIRTUAL" rows="6"&gt;&lt;/textarea&gt;`...

    react-用于管理表单和输入状态的React钩子

    &lt;form onSubmit={handleSubmit}&gt; {/* ...input fields */} &lt;/form&gt; ); } ``` 如`wsmd-react-use-form-state-881148b`这样的项目可能包含了对上述概念的实际实现,供开发者学习和参考。通过使用React钩子,我们...

    Java--Web开发技术实验报告.doc

    5. 表单验证是提高用户体验的关键部分,实验中的`onsubmit`事件处理程序(如`&lt;form onsubmit="pd()"&gt;`)可以在用户尝试提交表单时触发JavaScript函数,进行数据验证。`if...else`语句结构用于条件判断,确保所有输入...

    Js验证函数

    - 使用 `onsubmit` 事件来调用验证函数:在 `&lt;form&gt;` 标签中设置 `onsubmit="return test()"`。 - 示例: ```html &lt;form onsubmit="return test()"&gt; ... &lt;/form&gt; ``` - **注意事项**:确保验证函数最后...

    【JavaScript源代码】React获取input值并提交的2种方法实例.docx

    &lt;form onSubmit={this.handlePost}&gt; (input) =&gt; (this.inputValue = input)} /&gt; 提交 &lt;/form&gt; ); } } export default InputDemo; ``` **解析** 1. **创建Ref**:在组件中定义一个变量`inputValue`,用于...

Global site tag (gtag.js) - Google Analytics