formオブジェクト入力チェック（正規表現含む）
メールアドレスチェック（正規表現）
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] chkRegEmail
* [機 能] 正規表現によるメールアドレス（E-mail）チェック
* [引 数]
* @param str 入力された文字列
* [返り値]
* @return true(E-mail形式である場合) | false(E-mail形式でない場合)
*/
function chkRegEmail(str){
/* E-mail形式の正規表現パターン */
/* @が含まれていて、最後が .(ドット)でないなら正しいとする */
var Seiki=/[!#-9A-~]+@+[a-z0-9]+.+[^.]$/i;
/* 入力された値がパターンにマッチするか調べる */
if(str!=""){
if(str.match(Seiki)){
alert(str.match(Seiki)+"\n\nメールアドレスの形式は正しいです");
return true;
}else{
alert("メールアドレスの形式が不正です");
return false;
}
}else{
/* 何も入力されていない場合はアラート表示 */
alert("メールアドレスを入力してください");
return false;
}
}
</script>
<form action="#">
<input type="text" name="email" size="20" maxlength="100" value="hoge-hoge@abc.co.jp" />
<input type="button" value="メールアドレスチェック" onclick="chkRegEmail(this.form.email.value)" />
</form>
必須項目入力チェック
unknown
フォームを送信時に、必須入力項目が入力されているか調べます。
必須項目が全て入力されていれば、onSubmitイベントにTRUEを返し、フォームが送信されますが、未入力がある場合はFALSEを返し、フォームを送信しません。
サンプルを見る<script type="text/javascript">
/**
* [関数名] chkHissu
* [機 能] 必須項目入力チェック
* [説 明] フォーム送信時に必須項目が全て入力されているか調べる
* [引 数]
* @param frm フォームオブジェクト
* [返り値]
* @return true(必須項目が全て入力されている場合) | false(未入力がある場合)
*/
function chkHissu(frm){
/* 必須入力のname属性 */
var hissu=Array("name","age","sex","comment");
/* アラート表示用 */
var hissu_nm = Array("名前","年齢","性別","備考");
/* 必須入力の数 */
var len=hissu.length;
for(i=0; i<len; i++){
var obj=frm.elements[hissu[i]];
/* テキストボックス or テキストエリアが入力されているか調べる */
if(obj.type=="text" || obj.type=="textarea"){
if(obj.value==""){
/* 入力されていなかったらアラート表示 */
alert(hissu_nm[i]+"は必須入力項目です");
/* 未入力のエレメントにフォーカスを当てる */
frm.elements[hissu[i]].focus();
return false;
}
}else{
/* radioボタンがチェックされているか調べる */
for(var j=0, chk=0; j<obj.length; j++){
/* チェックされていたらchkフラグをプラス */
if(obj[j].checked) chk++;
}
if(chk==0){
/* 1つもチェックされていない場合はfalseを返してフォーム送信しない */
alert(hissu_nm[i]+"は必須入力項目です");
return false;
}
}
}
/* 必須入力項目が全て入力されている場合はtrueを返してフォーム送信 */
return true;
}
</script>
<form method="post" action="content/demo/test.php" onsubmit="return chkHissu(this)">
<fieldset>
<p>
名前（必須）：<input type="text" name="name" />
</p>
<p>
年齢（必須）：<input type="text" name="age" size="3" maxlength="2" /> 才
</p>
<p>
性別（必須）：
<input type="radio" name="sex" value="men" />男
<input type="radio" name="sex" value="woman" />女
</p>
<p>
備考（必須）：<br>
<textarea name="comment" cols="40" rows="3"></textarea>
</p>
<p>
確認メール：<input type="checkbox" name="copymail" value="1" />必要
</p>
<p>
<input type="submit" value="送信" />
<input type="reset" value="リセット" />
</p>
</fieldset>
</form>
入力文字数をリアルタイム表示
unknown
サンプルを見る<script type="text/javascript">
/* [関数名] getInputLength
* [機 能] 入力文字数をリアルタイム表示
* [説 明] 半角も全角も1文字としてカウント。改行はノーカウント。
* [引 数]
* @param frm フォームオブジェクト
* @param str 文字列
* [返り値] なし
*/
function getInputLength(frm,str){
var len=str.length; /* 入力された文字列の長さ */
var cnt=x=y=0;
for(i=0; ;cnt++){
/* 改行のがいくつあるカウント */
x=str.indexOf("\n",y);
if(x==-1) break;
y=x+2;
}
/* 改行はカウントせず、文字数のみ表示 */
frm.elements["strlength"].value = len-(cnt*2);
}
</script>
<form action="#">
<p>入力した文字列の文字数が、下のテキスト内に表示されます。</p>
<p><textarea name="area" cols="60" rows="5" wrap="soft" onkeyup="getInputLength(this.form, this.value)"></textarea></p>
<p>入力された文字数：<input type="text" size="3" name="strlength" readonly="readonly" /></p>
</form>
数値の先頭からゼロを除去
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] ZeroShift
* [機 能] ゼロ詰め
* [説 明] 数値の先頭からゼロを除去
* [引 数]
* @param frm フォームオブジェクト
* @return ゼロ除去後の文字列をテキストボックス(after)に表示
*/
function ZeroShift(frm){
var tmpBefore=frm.before.value;
var rep = new RegExp("^0+0?");
return frm.elements["after"].value=tmpBefore.replace(rep,"");
}
</script>
<form action="#">
<p>
ゼロ除去前：<input type="text" name="before" value="00000050" size="20" maxlength="10" />
</p>
<p>
<input type="button" onclick="this.form.after.value=ZeroShift(this.form)" value="ゼロ詰め" />
</p>
<p>
ゼロ除去後：<input type="text" name="after" size="20" maxlength="10" />
</p>
</form>
数値の先頭をゼロで埋める
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] ZeroFormat
* [機 能] ゼロ埋め
* [説 明] 数値が指定した桁数になるまで数値の先頭をゼロで埋める
*
* @param integer num 数値
* @param integer max 桁数
* @return integer tmpS ゼロ埋め後の数値
*/
function ZeroFormat(num,max){
var tmp=""+num;
while(tmp.length<max){
tmp="0"+tmp;
}
return tmp;
}
/*
例：document.write(ZeroFormat(1,4)); //0001
*/
</script>
<form action="#">
<p>
ゼロ埋め前：<input type="text" name="before" value="5" size="12" maxlength="10" />
桁数：<input type="text" name="n" size="2" maxlength="2" value="4" />
</p>
<p>
<input type="button" onclick='this.form.elements["after"].value=ZeroFormat(this.form.elements["before"].value,this.form.elements["n"].value)' value="ゼロ埋め" />
</p>
<p>
ゼロ詰め後：<input type="text" name="after" size="40" maxlength="256" />
</p>
</form>
入力文字数チェック
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] chkMaxLength
* [機 能] 入力文字数チェック
* [説 明] 文字列の文字数を調べ、最大文字数以内で入力されているか調べる
* 半角、全角、改行（\n）は1文字としてカウントされる
* [引 数]
* @param obj フォームオブジェクト
* @param strLength 最大文字数
* [返り値]
* @return なし
*/
function chkMaxLength(obj, strLength) {
var tmpLength=obj.value.length;//入力された文字列の長さ（文字数）
if(tmpLength > strLength) {
/* 入力文字数が最大文字数を超えている場合 */
alert(tmpLength+"文字 > 最大"+strLength+"文字\n\n最大文字数を超えています");
}else if(tmpLength == strLength){
/* 入力文字数と最大文字数が等しい場合 */
alert(tmpLength+"文字 == 最大"+strLength+"文字\n\nこれ以上入力できません");
}else{
/* 入力文字数が最大文字数に満たない場合 */
alert(tmpLength+"文字 < 最大"+strLength+"文字\n\nまだ入力できます");
}
}
</script>
<form action="#">
<strong>最大5文字まで入力可</strong>
<p>
<!-- テキストボックスの例 -->
<input type="text" name="txt" value="あiうえお" />
<input type="button" onclick="chkMaxLength(this.form.txt, 5)" value="文字数チェック" />
</p>
<p>
<!-- テキストエリアの例（改行も1文字としてカウントされる） -->
<textarea name="area" cols="50" rows="5">あiうえ
お</textarea>
<input type="button" onclick="chkMaxLength(this.form.area, 5)" value="文字数チェック" />
</p>
</form>
全角カナチェック
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] isZenKana
* [機 能] 全角ナチェック
* [説 明] 文字列の中に全角カナが含まれるか調べる
* [引 数]
* @param obj テキストボックスオブジェクト
* [返り値]
* @return true(含まれている) | false(含まれていない)
*/
var zen="アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォッャュョ";
function isZenKana(obj) {
var str=obj.value; /* 入力値 */
var mes="";
for (var i=0; i<str.length; i++) {
/* 文字列を１文字ずつ調べる */
var tmp1=str.substr(i,1);
for (var j=0; j<zen.length; j++) {
var tmp2=zen.substr(j,1);
/* 含まれていた全角カナを格納 */
if (tmp1==tmp2) {
mes+="「"+tmp1+"」";
}
}
}
if(mes!=""){
/* 全角カナが含まれている場合 */
alert (mes+"\n\n全角カナが含まれています");
return true;
}else{
/* 全角カナが含まれていない場合 */
alert ("全角カナは含まれていません。");
return false;
}
}
</script>
<form action="#">
<input type="text" name="txt" value="あイうｴおカキｸけコ" maxlength="20" />
<input type="button" onclick="isZenKana(this.form.txt)" value="全角カナチェック" />
</form>
半角カナチェック
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] isHanNumAlpha
* [機 能] 半角英数字チェック
* [説 明] 文字列の中に半角英数字（0-9,a-z,A-Z）以外の文字が含まれているか調べる
* 半角スペースも半角英数字とみなす
* [引 数]
* @param obj テキストボックスオブジェクト
* [返り値]
* @return true(含まれていない) | false(含まれている)
*/
function isHanNumAlpha(obj){
var str = obj.value; /* 入力値 */
for (var i=0 ; i<str.length; i++) {
var code=str.charCodeAt(i);
/* 文字コードでチェック */
if ((48<=code && code<=57) ||
(65<=code && code<=90) || (97<=code && code<=122) ||
str.substr(i,1)==" ") {
/* 半角数字（0-9）の文字コード範囲 */
/* 半角英字（a-z,A-Z）の文字コード範囲 */
/* 半角スペースも許容 */
}else{
alert("半角英数字以外が含まれています");
return false;
}
}
alert("全て半角英数字です");
return true;
}
</script>
<form action="#">
<input type="text" name="txt" value="abc123" />
<input type="button" onclick="isHanNumAlpha(this.form.txt)" value="半角英数字チェック" />
</form>
半角英数字チェック
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] isHanAlpha
* [機 能] 半角英字チェック
* [説 明] 文字列の中に半角英字（a-z,A-Z）以外の文字が含まれているか調べる
* 半角スペースも半角英字とみなす
* [引 数]
* @param obj テキストボックスオブジェクト
* @return true(含まれていない) | false(含まれている)
*/
function isHanAlpha(obj){
var str=obj.value; /* 入力値 */
for(var i=0 ; i<str.length; i++){
var code=str.charCodeAt(i);
if ((65<=code && code<=90) || (97<=code && code<=122) ||
str.substr(i,1)==' ') {
/* 半角英字（a-z,A-Z）の文字コード範囲 */
/* 半角スペースも許容 */
}else{
alert("半角英字以外が含まれています");
return false;
}
}
alert("全て半角英字です");
return true;
}
</script>
<form action="#">
<input type="text" name="txt" value="abcABC" />
<input type="button" onclick="isHanAlpha(this.form.txt)" value="半角英字チェック" />
</form>
全角チェック
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] isZen
* [機 能] 全角チェック
* [説 明] 文字列の中に全角以外の文字が含まれているか調べる
* 全角スペースも全角とみなす
* [引 数]
* @param obj テキストボックスオブジェクト
* [返り値]
* @return true(含まれていない) | false(含まれている)
*/
function isZen(obj){
var str=obj.value; /* 入力値 */
for(var i=0; i<str.length; i++){
/* 1文字ずつ文字コードをエスケープし、その長さが4文字以上なら全角 */
var len=escape(str.charAt(i)).length;
if(len>=4){
alert("全角文字が含まれています");
return false;
}
}
alert("全角文字は含まれていません");
return true;
}
</script>
<form action="#">
<input type=text name="txt" value="ｱｲｳエｵ" />
<input type="button" onclick="isZen(this.form.txt)" value="全角チェック" />
</form>
半角チェック
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] isHan
* [機 能] 半角チェック
* [説 明] 文字列の中に半角以外の文字が含まれているか調べる
* 半角スペースも半角文字とみなす
* [引 数]
* @param obj テキストボックスオブジェクト
* @return true(含まれていない) | false(含まれている)
*/
function isHan(obj){
var str=obj.value; /* 入力値 */
for (var i=0; i<str.length; i++) {
/* 1文字ずつ文字コードをエスケープし、その長さが4文字未満なら半角 */
var len=escape(str.charAt(i)).length;
if (len<4){
}else{
alert("半角以外の文字が含まれています");
return false;
}
}
alert("全て半角文字です");
return true;
}
</script>
<form action="#">
<input type="text" name="txt" value="ab c12＠3" />
<input type="button" onclick="isHan(this.form.txt)" value="半角チェック" />
</form>
半角チェック（正規表現）
unknown
正規表現にマッチしている場合、マッチしている部分が戻り値として返ります。 マッチしていない場合は、FALSEが返ります。
サンプルを見る<script type="text/javascript">
/**
* [関数名] isRegHan
* [機 能] 半角チェック
* [説 明] 文字列中に半角文字以外が含まれているか正規表現を使用して調べる
* [引 数]
* @param obj テキストボックスオブジェクト
* [返り値]
* @return true(半角文字のみの場合) | false(半角文字以外が含まれている場合)
*/
function isRegHan(obj){
str=obj.value;
/* 半角英数字(0-9)、四則演算子(+-/*)、ピリオド(.)、カンマ(,)のみ */
var tmp=str.match(/[0-9a-zA-Z\+\-\/\*\,\. ]+/g);
/* matchメソッドの返り値が入力値と等しい場合は、全て半角 */
if (tmp!=str){
alert("半角文字以外が含まれています");
return false;
}else{
alert("半角文字のみです");
return true;
}
}
</script>
<form action="#">
<input type="text" name="txt" value="23あ" />
<input type="button" value="半角チェック（正規表現）" onclick="isRegHan(this.form.txt)" />
</form>
数値チェック（文字コード）
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] isNum
* [機 能] 数値チェック（文字コードでチェック）
* [説 明] 数値（0-9）かどうか文字コードで調べる
* [引 数]
* @param obj テキストボックスオブジェクト
* [返り値]
* @return true(含まれていない) | false(含まれている)
*/
function isNum(obj){
var str=obj.value; /* 入力値 */
for(var i=0 ; i<str.length; i++){
var code=str.charCodeAt(i);
if ((48>code || code>57)){
/* 数値（0-9）以外の文字コード範囲 */
alert("数値以外が含まれています");
return false;
}
}
alert("全て数値です");
return true;
}
</script>
<form action="#">
<input type="text" name="txt" value="123456789" />
<input type="button" onclick="isNum(this.form.txt)" value="数値チェック" />
</form>
数値チェック（正規表現）
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] isRegNum
* [機 能] 数値チェック（正規表現）
* [説 明] 数値（0-9）以外の文字が含まれているか正規表現を使用して調べる
*
* /文字/ のように / で検索対象の文字を囲む
* ^ は否定、[^0-9] は 0～9 の数値以外を意味する
* /g を付けるとマッチした全ての文字をカンマ区切りで返す
* (この場合は数値以外の文字が返される)
*
* @param obj テキストボックスオブジェクト
* @return true(数値のみの場合) | false(数値以外が含まれている場合）
*/
function isRegNum(obj){
var str=obj.value; /* 入力値 */
if (str.match(/[^0-9]/g)){
alert (str.match(/[^0-9]/g)+"\n\n数値以外が含まれています");
return false;
}
alert ("全て数値です");
return true;
}
</script>
<form action="#">
<input type="text" name="txt" value="123" />
<input type="button" onclick="isRegNum(this.form.txt)" value="数値チェック" />
</form>
数値チェック（任意指定）
unknown
サンプルを見る<script type="text/javascript">
/**
* [関数名] chkNum
* [機 能] 数値チェック（任意指定）
* [説 明] 文字列中に数値および指定文字列以外が含まれているか調べる
* [引 数]
* @param obj テキストボックスオブジェクト
* [戻り値]
* @return true(数値および指定文字列のみの場合) | false(数値および指定文字列以外が含まれている場合)
*/
function chkNum(obj){
var num="0123456789+-.="; /* 数値としてOKなもの */
var tmp=new Array();
for(var i=0; i<obj.length; i++){
tmp[i]=obj.substring(i,i+1);
var flag=num.indexOf(tmp[i]);
if(flag==-1){
alert("数値（0-9）および指定文字列（+,-,.,=）以外が含まれています");
return flag;
}
}
alert("OK");
return true;
}
</script>
<form action="#">
<input type="text" name="txt" size="20" maxlength="20" value="1+1.0=2" />
<input type="button" value="数値チェック（0-9,+,-,.,=もOK)" onclick="chkNum(this.form.txt.value)" />
</form>
複数の要素が混在するフォームの処理
unknown
テキストボックスやチェックボックス、プルダウンなど複数の要素が混在するフォームで、指定した要素のみクリアするには、まずフォームの要素数を取得し、ループして要素のタイプを調べ、指定した要素ならクリアするといった処理をします。
サンプルを見る<script type="text/javascript">
/**
* [関数名] formClear
* [機 能] 複数の要素が混在するフォームのクリア処理
* [説 明] フォーム内の指定した要素のみクリアする
* [引 数] @param type クリアする要素名（タイプ属性）
* [戻り値] なし
*/
function formClear(type){
var frm=document.form11;
for(i=0; i<frm.length; i++){
if(frm.elements[i].type==type){
if(type=="select-one" || type=="select-multiple"){
frm.elements[i].selectedIndex=0;
}else if(type=="radio" || type=="checkbox"){
frm.elements[i].checked=false;
}else if(type=="text" || type=="textarea"){
frm.elements[i].value="";
}
}
}
}
</script>
<form name="form11" action="#">
<!-- ▼色々なフォーム要素 -->
<p><input type="text" value="テキストボックスです" /></p>
<p><textarea>テキストエリアです</textarea></p>
<p>
<input type="radio" name="rb" />ラジオボタン1
<input type="radio" name="rb" checked="checked" />ラジオボタン2
</p>
<p>
<input type="checkbox" checked="checked" /> チェックボックス1
<input type="checkbox" checked="checked" />チェックボックス2
</p>
<p>
<select>
<option value="0">▼選択してください</option>
<option value="1">リンゴ</option>
<option value="2" selected="selected">ミカン</option>
</select>
</p>
<p>
<select size="3" multiple="multiple">
<option value="0">▼選択してください</option>
<option value="1">リンゴ</option>
<option value="2" selected="selected">ミカン</option>
</select>
</p>
<hr />
<!-- ▼クリアボタン -->
<p>
<input type="button" onclick="formClear('text')" value="テキストボックス[text]のみクリア" />
<input type="button" onclick="formClear('textarea')" value="テキストエリア[textarea]のみクリア" />
</p>
<p>
<input type="button" onclick="formClear('radio')" value="ラジオボタン[radio]のみクリア" />
<input type="button" onclick="formClear('checkbox')" value="チェックボックス[checkbox]のみクリア" />
</p>
<p>
<input type="button" onclick="formClear('select-one')" value="プルダウン[select-one]のみクリア" />
<input type="button" onclick="formClear('select-multiple')" value="プルダウン[select-multiple]のみクリア" />
</p>
</form>