?
??????????????????-?????????????/title>
<link type="text/css" rel="stylesheet" href="../birch/style/article.css" />
<link rel="stylesheet" href="../birch/themes/simple/simple.css" />
<script charset="utf-8" src="../birch/jquery-3.3.1.min.js"></script>
<script>
// ????????????????????????????????????????????
function getMaxOptionIndex() {
const $options = $('#items #option'); // ??????????
let maxIndex = 0;
$options.each(function() {
// ????????????ID??hone_?????
const phoneId = $(this).find('input[label="???"]').attr('id');
if (phoneId) {
const match = phoneId.match(/^phone_(\d+)$/);
if (match && parseInt(match[1]) > maxIndex) {
maxIndex = parseInt(match[1]);
}
}
});
return maxIndex;
}
function AddNewoption(option) {
const maxIndex = getMaxOptionIndex() + 1;
const phoneId = "phone_" + maxIndex;
const nameId = "name_" + maxIndex;
var $link=$('<div id="option"><label>??? </label><input type="text" id="' + phoneId + '" required="true" name="' + phoneId + '" property="' + phoneId + '" oninput="onlyIntegerInput(event);" label="???" tooltip="???" autocomplete="off" style="width:300px;height:25px;" />'
+' <br /><label>??? </label><input type="text" id="' + nameId + '" required="true" name="' + nameId + '" property="' + nameId + '" autocomplete="off" style="width:300px;height:25px;" />'
+' <br /><input type="button" id="addline" value="???" onclick="AddNewoption(this);"/><input type="button" name="addline" value="???" onclick="DeleteOption(this);"/>'
+' <br /><br /></div>');
$(option).parent().parent().append($link);
$(option).parent().parent().children("#options_count").attr("value", $(option).parent().parent().children().length - 1);
};
function DeleteOption(option) {
$(option).parent().parent().children("#options_count").attr("value", $(option).parent().parent().children().length - 2);
$(option).parent().remove();
};
//???????f????????????
onlyIntegerInput=function(e){
if(e===undefined){
e=window.event;
}
var obj=e.srcElement?e.srcElement:e.target;
var val=obj.value;
var pattern = /[^\d]/ig;
if(pattern.test(val)) {
var i=getCursortPosition(e);
obj.value=val.replace(pattern,'');
setCaretPosition(e,i);
}
};
/*******************************************************************************
* ?????????
*
* @param ctrl
* @returns {Number}
*/
getCursortPosition=function(event) {// ????????????
if (event === undefined || event === null) {
event = arguments.callee.caller.arguments[0] || window.event;
}
var obj = event.srcElement?event.srcElement:event.target;
var CaretPos = 0; // IE Support
if (document.selection) {
obj.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -obj.value.length);
CaretPos = Sel.text.length;
} else if (obj.selectionStart || obj.selectionStart == '0'){
// Firefox support
CaretPos = obj.selectionStart;
}
return (CaretPos);
};
/*******************************************************************************
* ?????????
*
* @param ctrl
* @returns {Number}
*/
setCaretPosition=function(event, pos){// ????????????
if (event === undefined || event === null) {
event = arguments.callee.caller.arguments[0] || window.event;
}
var obj = event.srcElement?event.srcElement:event.target;
if (pos > 0) {
pos = pos - 1;//?????????????????????????????????????
}
if(obj.setSelectionRange){
obj.focus();
obj.setSelectionRange(pos,pos);
} else if (obj.createTextRange) {
var range = obj.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
};
String.prototype.endWith = function(endStr) {
var d = this.length - endStr.length;
return (d >= 0 && this.lastIndexOf(endStr) == d);
};
function verify() {
const maxIndex = getMaxOptionIndex();
for(var index = 1; index <= maxIndex; index++) {
var phone = document.getElementById("phone_" + index);
if (phone.value == null || phone.value == "") {
alert("???????????);
return false;
}
const phoneStr = String(phone.value).replace(/\s+/g, ''); // ??????????
const phoneReg = /^1[3-9]\d{9}$/; // ???????????
if (!phoneReg.test(phoneStr)) {
alert("????????????");
return false;
}
var name = document.getElementById("name_" + index);
if (name == null || name.value == "") {
alert("???????????);
return false;
}
}
window.onbeforeunload = null;
}
</script>
</head>
<body>
<form name="addInvite" method="post" action="addInvite.action" onsubmit="return verify()" enctype="multipart/form-data">
<br />
<input type="submit" name="button" value="??????? tabindex="2" style="width:100px;height:35px;" />
<br />
<br />
<div id="selects">
<br />
<br />
<div id="items" name="items">
<br />
<div id="options">
<input type="hidden" id="options_count" name="options_count" value="" />
<div id="option">
<label>???</label>
<input type="text" id="phone_1" required="true" name="phone_1" property="phone_1" value="" oninput="onlyIntegerInput(event);" label="???" tooltip="???" autocomplete="off" style="width:300px;height:25px;" />
<br />
<label>???</label>
<input type="text" id="name_1" required="true" name="name_1" property="name_1" value="" autocomplete="off" style="width:300px;height:25px;" />
<br />
<input type="button" id="addline" value="???" onclick="AddNewoption(this);"/><input type="button" name="addline" value="???" onclick="DeleteOption(this);"/>
<br />
<br />
</div>
</div>
</div>
</div>
</form>
</body>
</html>