form 表单验证提交

<script type='text/javascript'>
 function  checkForm()
 {
     $flag = true; 
  if(Common.isPassword($('#password').val()))
  {
   $('#message_password').html(' ');
   $('#message_password').attr('class','Tips-correct');
  }else{
   $('#message_password').html('请正确输入密码');
   $('#message_password').attr('class','Tips-Error');
   $flag =  false;
  }
  
  if($('#password').val()==$('#rpassword').val())
  {
   $('#message_rpassword').html(' ');
   $('#message_rpassword').attr('class','Tips-correct');
  }else{
   $('#message_rpassword').html('两次输入密码不真确,请重新输入');
   $('#message_rpassword').attr('class','Tips-Error');
   $flag =  false;
  }
  return $flag;
 }
</script>

<form action='__ACTION__' οnsubmit='return checkForm()' >

...........................................

<button type="submit" >保 存</button>

</form>

在表单上添加方法 οnsubmit='return checkForm()' 则在表单提交时会自动调用checkForm()方法,如果该方法返回true,则表单提交成功,否则,表单不提交,注意在onsubmit事件里面不要忘记 是 return 和方法名称

 

 

  • 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、付费专栏及课程。

余额充值