是什么
happy.js是jquery轻量级的from表单校验插件。
优点
- 轻量级，核心文件的代码不到200行；
- 可扩展，其提供了很好的扩展性。
如何用
引入js文件
<head>
<script src="jquery.js"></script>
<script src="happy.methods.js"></script>
<script scr="happy.js"></script>
<head>
复制代码HTML
<form method="post" id="form">
<p><label><span id="name">姓名</span> <input type="text" name="name" value="" id="username"></label>
</p>
<p><label><span id="tel">电话</span> <input type="number" name="tel" value="" id="telnum"></label></p>
<div class="sexinner">
<p class="sex" id="sexbox"><span><span>性别</span></span>
<label for="male"><input id="male" type="radio" name="sex" value="1"/>
<span>男</span></label>
<label for="female"><input id="female" type="radio" name="sex" value="2"/> <span>女</span></label>
</p>
</div>
<p><label><span id="height">身高</span> <input type="number" name="height" placeholder="单位:厘米"/></label></p>
<p><label><span id="weight">体重</span> <input type="number" placeholder="单位:公斤" name="weight"/></label></p>
<p>
<span><span id="prefer">偏好</span></span>
<label for="relaxed"><input id="relaxed" type="radio" name="favor" value="宽松"/> <span>宽松</span></label>
<label for="fit"><input id="fit" type="radio" name="favor" checked="checked" value="合身"/>
<span>合身</span></label>
<label for="slim"><input id="slim" type="radio" name="favor" value="修身"/> <span>修身</span></label>
</p>
</form>
复制代码js
$(document).ready(function(){
$("#form").isHappy({
textMode:true,
fileds:{
#username": {
required: true,
message: '请输入姓名',
},
"#telnum": {
required: true,
message: '请输入电话'
},
"input[name=height]": {
required: true,
message: '请输入身高'
},
"input[name=weight]": {
required: true,
message: '请输入体重'
},
'input[name=sex]': {
required: 'sometimes',
message: '请选择性别',
test: function () {
return $('#male').is(':checked') || $('#female').is(':checked') ? true : false;
},
errorTarget: '.sex'
}
},
happy:funct
})
})
复制代码