jquery表单提交简单实例

代码:

<!DOCTYPE html>


<html>


<head>


<meta charset="utf-8" />


<title>用户注册</title>


<script src="jquery.min.js"></script>


<script>


$(function(){   


   $('#register').click(function(){


     var name=$('#name').val();


var pass=$('#pass').val();


var phone=$('#phone').val();


     if(name==''){


   alert('用户名不能为空');


return false;


  }else if(pass==''){


     alert('密码不能为空。');


 return false;


  }else if(phone==''){


    alert('手机号码不能为空');


    return false;


  }else if(phone!=''){


     var reg=/^1[3458]\d{9}$/;


 if(!reg.test(phone)){


  alert('手机号码格式不正确');


  return false;


}


  }else{


$('form').submit();


  }


   })    


})


</script>


</head>


<body>


<form name="myform" method="post" action="__URL__/register">


<input type="text" name="name" value="" id="name"/>


<input type="password" name="pass" value="" id="pass" />


<input type="text" name="phone" value="" id="phone" />


<input type="submit" name="" value="用户注册" id="register" />


</form>


</body>


</html>


结果:




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单jQuery表单验证和提交的例子: ```html <form id="myform"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <input type="checkbox" id="allow" name="allow" checked> <label for="allow">同意协议</label><br> <button type="submit">提交</button> </form> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { var $username = $('#username'); var $password = $('#password'); var $allow = $('#allow'); var $form = $('#myform'); // 验证用户名 function validateUsername() { var value = $username.val(); if (!value) { alert('用户名不能为空'); return false; } return true; } // 验证密码 function validatePassword() { var value = $password.val(); if (!value) { alert('密码不能为空'); return false; } return true; } // 验证同意协议 function validateAllow() { if (!$allow.prop('checked')) { alert('请同意协议'); return false; } return true; } // 提交表单 function submitForm() { alert('提交成功'); $form.submit(); } // 绑定提交事件 $form.submit(function(event) { event.preventDefault(); // 阻止默认提交行为 if (validateUsername() && validatePassword() && validateAllow()) { submitForm(); } }); }); </script> ``` 该例子中,我们使用jQuery选择器获取表单元素,并定义了三个验证函数:`validateUsername()`、`validatePassword()`和`validateAllow()`,分别用于验证用户名、密码和同意协议是否勾选。在提交表单时,我们通过`event.preventDefault()`阻止了默认的表单提交行为,并在验证通过后调用`submitForm()`函数提交表单。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值