现在都用h5表单进行验证了,以下方式仅做回忆
https://www.runoob.com/jquery/jquery-plugin-validate.html
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery Validate验证框架详解title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js">script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js">script>
<script type="text/javascript">
$(function(){
var validate = $("#myform").validate({
rules:{
myname:{
required:true
},
email:{
required:true,
email:true
},
password:{
required:true,
rangelength:[3,10]
},
confirm_password:{
equalTo:"#password"
}
},
messages:{
myname:{
required:"必填"
},
email:{
required:"必填",
email:"E-Mail格式不正确"
},
password:{
required: "不能为空",
rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
},
confirm_password:{
equalTo:"两次密码输入不一致"
}
},
debug: true, //调试模式取消submit的默认提交功能 //errorClass: "label.error", //默认为错误的样式类为:error focusInvalid: false, //当为false时,验证无效时,没有焦点响应 onkeyup: false, submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form alert("提交表单"); form.submit(); //提交表单 },
}); }); script> head>
html:
<body> <form id="myform" method="post" action=""> <p> <label for="myname">用户名:label> <input id="myname" name="myname" /> p> <p> <label for="email">E-Mail:label> <input id="email" name="email" /> p> <p> <label for="password">登陆密码:label> <input id="password" name="password" type="password" /> p> <p> <label for="confirm_password">确认密码:label> <input id="confirm_password" name="confirm_password" type="password" /> p> <p> <input class="submit" type="submit" value="立即注册" /> p> form> body> html>
自定义验证:
$.validator.addMethod( "zidingyi", //验证方法名称 function(value, element, param){ //验证规则 var reg=new RegExp(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/); if(!reg.test(value)){ return false; } return true; }, '请填写正确的身份证号'//验证提示信息 );
调用方法:
//input验证 $("#form-article-add").validate({ rules: { p_name: { required: true, }, jm_name: { required: true, }, real_name:{ required:true, maxlength:12, }, grade:{ required:true, }, id_card:{ zidingyi1:true, required:true, },
自己开发功能:
$(function(){ //input验证 $("#form-article-add").validate({ rules:{ sort:{ required:true, min:1, max:999, digits:true, }, num:{ required:true, min:1, max:999, digits:true, }, price:{ required:true, decimalpoint:true, }, reference:{ required:true, min:1, max:99999 }, starttime:{ required:true, date:true, }, endtime:{ required:true, date:true, }, }, messages: { }, onkeyup:true, debug:true, //debug模式,开启时submitHandler出错也不会跳转页面 /*保存并提交时执行的事件*/ submitHandler:function(){ var ti=document.getElementById('input_img'); /*if (!ti.files || !ti.files[0]) { return layer.msg('必须选择详情图'); }*/ if (!ti.files || !ti.files[0]) { if(filetype) { ti.files = filetype; if(!ti.files) { return layer.msg('必须选择详情图'); } }else{ return layer.msg('必须选择详情图'); } } var tii=document.getElementById('input_hxi'); /*if (!ti.files || !ti.files[0]) { return layer.msg('必须选择历史小图'); }*/ if (!tii.files || !tii.files[0]) { if(historyimg) { tii.files = historyimg; if(!tii.files) { return layer.msg('必须选择历史小图'); } }else{ return layer.msg('必须选择历史小图'); } } //判断基准为小数后两位 var referenceid=document.getElementById("reference").value; var reg = /^\d+(\.\d{1,2})?$/; var isfloat = reg.test(referenceid);//console.log(isfloat); if (referenceid%1 !== 0 && !isfloat){ $("#reference").focus(); return layer.msg('小数后面只能写两位'); } var titles=document.getElementById('title').value; if(/[~!@#$^&*()=|{}':;',\[\].<>/?~!@#¥……&*()——+|{}【】‘;:”“'。,、?]/.test(titles)) { return layer.msg('标题不能含有非法字符'); } if (titles.length>15) { return layer.msg('标题必须小于15个字符'); } var pd=false; layer.confirm('确认添加业绩活动?',function() { if (pd) { return; } pd = true; layer.load(0,{ shade:[0.5,'#fff'], zindex:1 }); var formData = new FormData(); formData.append("file0",$("#input_img")[0].files[0]); formData.append("file1",$("#input_hxi")[0].files[0]); formData.append("public_key",'php echo C('imgparam')['public_key']; ?>'); formData.append("type",6); $.ajax({ url: 'php echo C('web_server_url_admin'); ?>', data:formData, processData:false, contentType:false, type: 'POST', dataType: "JSON", success: function (data) { alert(); }, error: function () { layer.msg('图片上传连接失败,请检查您的网络连接',function(){layer.closeAll();}) }, }); }); } }); });