html form提交前验证,form表单提交前验证实现方法

form表单提交前验证实现方法2017-11-26 20:54

form表单提交是网站中最常见的,基本上所有的网站都会用到。

除非你就一些静态网页,仅仅是展示,而不需要互动,所以不需要提交表单。

但是在提交表单的时候,难免会出现一些意想不到的错误。

比如说数据库里面的name字段,明明是不允许为空,但是在提交表单的时候,没有填写,却提交了。

要如何才能避免这种情况发生呢?

这时我们就需要在表单提交前进行验证了。

看看下面的代码。 html代码

姓名:

年龄:

$("#okbtn").click(function(){

var name=$.trim($("#name").val());

var age=$.trim($("#age").val());

if (name==''){

alert("请填写姓名");

return false;

}

if (age==''){

alert("请填写年龄");

return false;

}

});

亲自测试一下

上面的代码,我们用的jquery。

当点击提交按钮的时候,在其click事件中,判断填写字段是否为空,如果为空,则return false,就不会进行提交了。

同理,对其他表单字段进行验证也是同样的方法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Ant Design 中,可以使用 Form 组件的 validateFields 方法来进行表单验证。在验证通过后,再进行表单提交操作。 示例代码如下: ``` import { Form, Button, message } from 'antd'; const Demo = () => { const [form] = Form.useForm(); const handleSubmit = () => { form.validateFields() .then(values => { console.log(values); // 在这里进行表单提交操作 message.success('提交成功'); }) .catch(error => { console.log(error); message.error('提交失败'); }); } return ( <Form form={form}> <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]} > <Input placeholder="请输入用户名" /> </Form.Item> <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]} > <Input.Password placeholder="请输入密码" /> </Form.Item> <Button onClick={handleSubmit}>提交</Button> </Form> ); } ``` 在上面的例子中,当用户点击提交按钮时,会触发 handleSubmit 函数。在 handleSubmit 函数中,首先调用 form.validateFields() 方法进行表单验证。如果验证通过,则打印表单数据到控制台,并进行表单提交操作,并使用 message.success() 方法提示用户提交成功。如果验证不通过,则使用 message.error() 方法提示用户提交失败。 需要注意的是,validateFields 方法返回一个 Promise 对象,因此需要使用 .then() 和 .catch() 方法来处理验证结果。在 .then() 方法中,可以获取到验证通过后的表单数据。在 .catch() 方法中,可以获取到验证失败的具体错误信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值