本文整理了一系列 JavaScript 常用前端交互代码片段，涵盖全选与单项选择逻辑、表单提交跳转、单选框值获取以及邮箱和手机号的格式验证。通过具体函数示例，展示如何利用 DOM 操作实现批量选中、状态判断及输入合法性校验，适用于 JSP 或 HTML 页面中的基础交互开发。
在 JSP 页面中，可以通过添加 onclick 属性来触发 JavaScript 函数。例如，实现全选功能时，可以在按钮上设置 onclick="javascript:allselect()"，其中 javascript: 前缀可以省略。
另一种方式是将函数直接绑定到元素上，例如使用 document.getElementById("allselectbox").onclick = function() 的形式进行事件绑定。
全选功能实现
以下是全选功能的实现代码：
function allselect(){
var form = document.forms[0];
var state = form.allselectbox.checked;
var length = form.username.length;
if(length){
for(var i=0;i<length;i++){
form.usernames[i].checked=state;
}
}else form.username.check = state;
}
全选的另一种实现方式如下：
function allSelect(){
var items = document.getElementsByName("usernames");
var state = document.getElementsByName("allselectbox")[0].checked;
if(items.length){
for(var i = 0; i < items.length; i++){
items[i].checked = state;
}
}else{
items.checked = state;
}
}
单项选择与页面跳转
单项选择的实现逻辑如下：
fuction selectitem(){
var form = document.forms[0];
var length = form.username.length;
if(length){
for(var i=0;i<length;i++){
if(form.usernames[i].checked) return true;
}
}else return form.usernames.check;
}
表单值获取与提交
实现跳转到指定页面的功能代码如下：
function topage(page){
var form = document.forms[0]
form.page.value = page;
form.submit;
}
获取单选框 Radio 的值的方法如下：
function getradiovalue(objradio){
var result = "";
try{
if(typeof(objradio.value)=="undefined"){
for(var i=0;i<objradio.length;i++){
if(objradio[i].checked){
return objradio[i].value;
}
}
}else{
if(objradio.checked) result = objradio.value;
}
}catch(e){result = "";}
return result;
}
邮箱与手机号验证
邮箱格式验证函数如下：
function isValidEmail(inEmail){
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return filter.test(inEmail);
}
手机号格式校验代码如下：
function validateMobile(){
var form = document.forms[0];
if(form.mobile.value!=""){
var num = /^1[35]\d{9}$/
if(!num.test(form.mobile.value)){
alert("收货人的手机号格式不正确");
return false;
}
alert("正确");
}
}
待续........